Liquid Multi-column Floated Lists

Every now and then I’ll design a web site for a client that incorporates a multi-column list. Typically this list is on the homepage, so we would create a module that would allow the client/user to enter in values in a textfield and then a server-side language would render the page upon request. Last month I decided to find a more efficient method, one that could be used repeatedly and would not require a custom interface to be built just to use it. Of course the WYSIWYG editor that is built into our CMS allows the client to create a two-column table that can be used to serve the same purpose, but that method assumes that the client/user is familiar with the process; which is rarely the case.

To get to the point, I put together a ul element that would display within content blocks but not clear other ul elements. The code:

ul {
float: left;
clear: none;
display: block;
min-width: 40%;
padding: 0 20px 0 0;
}

Because floated elements are required to have a width, I opted for a percentage and went with it. This worked perfectly in Firefox, but when I tested it in IE, the second ul wrapped and appeared below the first. I tried lowering the width to a smaller number, and after several successive attempts, I finally ended up with:

ul {
float: left;
clear: none;
display: block;
min-width: 20%;
padding: 0 20px 0 0;
}

I’m not sure why the larger widths did not work in IE, but making it smaller seems to have solved the problem.

As soon as I finished, I decided to add p tags above and below to make sure everything worked properly in context. Upon doing so, I discovered that because the ul elements were floating, the paragraphs would, as a result, wrap around them. No problem, I just cleared the p tags:

p {
clear: both;
}

Viola; client/user controlled multi-column floated lists. Now whenever the client/user wants to float one list next to another, all that is required is to insert something like this into the body:

<ul>
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>
<ul>
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>

Or as he/she would see it:

  • list item one
  • list item two
  • list item three
  • list item one
  • list item two
  • list item three

The CSS will automatically cause the lists to float alongside. An added bonus is that if any particular list element happens to exceed the maximum width of the parent element (the body) the second list will automatically wrap below the second.