title: lining up list elements in two side by side unordered lists
body: <p>i'm trying to line up list elements together in two unordered lists side by side like this:</p>
  
  <pre><code>list element 1     list element 1
  list element 2     list element 2
  list element 3     list element 3 that
                     wraps
  list element 4     list element 4
  </code></pre>
  
  <p>right now the list on the left wont wrap with the list on the right, instead it shows</p>
  
  <pre><code>list element 1     list element 1
  list element 2     list element 2
  list element 3     list element 3 that
  list element 4     wraps
                     list element 4
  </code></pre>
  
  <p>how do i make them line up correctly?  right now i have it setup like so:</p>
  
  <p>css</p>
  
  <pre><code>.col {float:left;width:150px;}
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="col"&gt;
    &lt;ul&gt;
      &lt;li&gt; list element &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="col"&gt;
    &lt;ul&gt;
      &lt;li&gt; list element &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>thanks</p>