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

What you’re looking to do, you can’t do with pure CSS, unfortunately. You can with a combination of javascript and CSS.