title: ListItem disc displaying at vertical bottom
body: <p>I have a couple un-ordered lists on my page. Both lists use <code>list-style: disc inside;</code>. Each list's list-items have a couple <code>div</code>'s inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.</p>
  
  <p>Here is a <a href="http://cl.ly/64231bb27eea3e9551e1" rel="noreferrer">screenshot</a> kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.</p>
  
  <p>Here is a striped down version of my HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="billing_form"&gt;
  &lt;div id="purchase_items"&gt;
      &lt;h2&gt;Your purchase&lt;/h2&gt;
      &lt;h4&gt;Items:&lt;/h4&gt;
      &lt;div class="items"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="item"&gt;First Product - one year license&lt;/div&gt;
                  &lt;div class="price"&gt;$99.00 USD&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="item"&gt;Second product &amp; 3 year Product Plan&lt;/div&gt;
                  &lt;div class="price"&gt;$125.00 USD&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="subtotal"&gt;SUBTOTAL: $224.00 USD&lt;/div&gt;
      &lt;h4&gt;Discounts:&lt;/h4&gt;
      &lt;div class="discount"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="item"&gt;A really long discount item name - with extra info on three lines!&lt;/div&gt;
                  &lt;div class="price"&gt;- $20.00 USD&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="total"&gt;TOTAL: $204.00 USD&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS, as small as I thought was relevant:</p>
  
  <pre><code>html
  {
      font-family: sans-serif;
  }
  
  #billing_form
  {
      width: 350px;
      margin: 0 auto;
      font-size: 14px;
      background-color: #EEEEEE;
  }
  
  #billing_form .items
  {
      position:relative;
  }
  
  #billing_form .discount
  {
      position:relative;
      color:#3665B0;
  }
  
  #billing_form ul
  {
      margin: 0;
      padding: 0;
      list-style: disc inside;
  }
  
  #billing_form .items .item, 
  #billing_form .discount .item
  {
      display: inline-block;
      width: 190px;
  }
  
  #billing_form .price
  {
      float: right;
      padding-left: 20px;
  }
  
  #billing_form .items,
  #billing_form .discount,
  #billing_form .subtotal,
  #billing_form .total
  {
      width: 100%;
  }
  
  #billing_form .subtotal,
  #billing_form .total
  {
      text-align: right;
      margin-top: 5px;
      border-top: 1px solid;
      font-weight: bold;
  }
  
  #billing_form  #purchase_items
  {
      margin: 10px 10px 10px;
  }
  </code></pre>
  
  <p>I found a <a href="https://stackoverflow.com/questions/3347295/disc-to-left-of-list-item-displaying-at-bottom">similar SO question</a>. Unfortunately, the accepted (and only) answer to it states to try <code>position: relative;</code> and <code>vertical-align: top;</code> but it didn't work for me. I tried it with both <code>#billing_form ul</code> and <code>#billing_form ul li</code> and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 &amp; 4 and Google Chrome.</p>
  
  <p>Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?</p>