UL/LI which flows down, then to the right when it runs out of room

Question

I am trying to create some HTML/CSS for footer navigation.

What I would like to have is main sections as separate ul's and then each sub-section as an li within.

The ul would have a fixed height, with the li's flowing down within. If they run out of room to go down, I'd like them to then start again on the right hand side.

I though this would be quite simple, and tried it with the following HTML/CSS

<ul class="my_ul">
<li class="bold"> Home </li>
</ul>
<ul class="my_ul">
<li class="bold"> Catalogue </li>
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
<li> Category 5 </li>
</ul>
<ul class="my_ul">
<li class="bold"> Company </li>
<li> Company 1 </li>
<li> Company 2 </li>
<li> Company 3 </li>
<li> Company 4 </li>
<li> Company 5 </li>
</ul>


.my_ul {
height: 130px;
float: left;
}
.my_ul li {
float: left;
clear: left;
list-style: none;
}

The above works, except that when it gets to the bottom of the ul it keeps going. Obviously overflow:hidden makes it disapear, but this isn't what I want. I want it to start a new column to the right.

Any ideas how I can improve this?

Answer 1

There is now a CSS only solution for this issue. CSS3's flex box model achieves the desired effect with CSS alone.

ul {
    display: flex;
    flex-flow: column wrap;
}

http://jsfiddle.net/2Dr6E/

This will make ul's content (the li tags) flow from top to bottom, and then left to right once it fills the ul's height.

This is supported in most recent browsers Chrome, Opera, Firefox, and IE11 - as well as Safari and (with -webkit- prefix) and IE10 with (-ms- prefix).

Answer 2

For columns you can use CSS3, though it won't work in older browsers nor IE9 RC.

#yourfooter
{
column-count: 3;
}

If your target group ain't likely to have any modern browser with CSS3 support, i would personally take the easy shortcut, by making a couple of div's holding the content.