lining up list elements in two side by side unordered lists

Question

i'm trying to line up list elements together in two unordered lists side by side like this:

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

right now the list on the left wont wrap with the list on the right, instead it shows

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

how do i make them line up correctly? right now i have it setup like so:

css

.col {float:left;width:150px;}

html

<div class="col">
  <ul>
    <li> list element </li>
  </ul>
</div>
<div class="col">
  <ul>
    <li> list element </li>
  </ul>
</div>

thanks

Answer 1

It sounds like you are trying to display tabular data without using an HTML table. The motivation behind this is likely the aversion to tables that ensued in the post-table-based design era. However, it should be noted that there is a time and a place for everything, and there is a good reason that the <table> element is not deprecated.

Once upon a time, there was an element named <table>. CSS was not even a glimmer in its mother's eye. In order to get elements to appear as you wanted them to, you had to string together a web of nested tables. This was a nightmare. It was a nightmare to read the code, to maintain the code, and to create the code in the first place! Along came CSS and everyone eschewed tables as passe and forbidden. Why? Because people had been using the table tag as it was not intended, cobbling it into places it had no business being.

Now, many people cobble <ul>s of related data into columns to represent tables, for fear of using the forbidden <table> element. But the fact is, this is as bad as misusing tables. It creates spaghetti code that is difficult for screen readers to make sense of, is difficult to debug, difficult to maintain, and eventually relies on browser hacks or javascript for styling.

To execute this hack, however, to line up lists like this you would have to specify a height attribute for the li elements. With a static height, the li positioning becomes predictable and you can actually do this. But, this does not sound like what you are looking for, as it sounds like li3 needs to be of fluid height. The only way to really do this is to use jQuery or an HTML table and determine the height of li3 dynamically and apply that height to the other li3s. To use jQuery to accomplish this may result in a flash of unstyled content, especially on slower connections and older browsers. I strongly advise you reconsider your HTML instead.

Answer 2

Easiest and cleanest option would be to use tables

<table>
    <tr>
        <td class="col">
              <ul>
                <li> list element </li>
              </ul>
        </td>

        <td class="col">
              <ul>
                    <li> list element </li>
              </ul>
        </td>
    </tr>
</table>