UL / LI, which flows down, then to the right, when the room ends

Question

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

What I would like to have is the main sections as separate ul, and then each subsection as li inside.

The ul will have a fixed height, and li will flow inside. If they don’t have enough space to go down, I would like them to start on the right side again.

I, although it 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 he gets to the bottom of ul, he continues to move. Obviously overflow: hidden makes it inefficient, but that is not what I want. I want him to start a new column on the right.

Any ideas how I can improve this?

Thanks,

Matt

Answer 1

What you want to do, you cannot do with pure CSS, unfortunately. You can combine javascript and CSS.

Answer 2

For columns, you can use CSS3, although it will not work in older browsers and IE9 RC.

 #yourfooter { column-count: 3; } 

If your target group is unlikely to have any modern browser with CSS3 support, I personally will take a simple shortcut by making a couple of divs containing content.

Answer 3

Currently, there is only a CSS solution for this problem. Model flex3 flex3 provides the desired effect only with CSS.

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

http://jsfiddle.net/2Dr6E/

This will cause the contents of ul ( li tags) to flow from top to bottom and then left to right when it fills the height of ul .

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

Answer 4

I found a way ... CSS only using the nth-child selector. (This will probably be a problem for older browsers).

See the demo here: http://jsfiddle.net/MYB7g/3/

Here is the relevant CSS:

 ul { white-space: nowrap; margin: 0; padding: 0; margin-bottom: 100px; /* space the two demos apart */ } li { width: 180px; height: 30px; background-color: rgba(0,0,255,.5); color: white; padding: 5px; margin: 0px; border-radius: 8px; font-family: Helvetica; font-size: 24px; line-height: 30px; display: inline-block; } /******************************************/ /* N = 2 */ /******************************************/ ul.rows2 { margin-left: 180px; /* li.width * (N-1) */ } ul.rows2 li { margin-left: -180px; /* -(li.width * (N-1)) */ } ul.rows2 li:nth-child(even) { background-color: rgba(255,0,255,.5); position: relative; top: 50px; /* li.height + vertical spacing */ left: -195px; /* -(li.width + horizontal spacing */ margin-left: 0px; } /******************************************/ /* N = 3 */ /******************************************/ ul.rows3 { margin-left: 360px; /* li.width * (N-1) */ } ul.rows3 li { margin-left: 0px; } ul.rows3 li:nth-child(3n+1) { /* top */ margin-left: -360px; /* -(li.width * (N-1)) */ } ul.rows3 li:nth-child(3n+2) { /* second */ background-color: rgba(255,0,0,.5); position: relative; top: 50px; /* li.height + vertical spacing */ left: -195px; /* -(li.width + horizontal spacing */ } ul.rows3 li:nth-child(3n+3) { /* bottom */ background-color: rgba(255,0,255,.5); position: relative; top: 100px; /* 2*(li.height + vertical spacing */ left: -390px; /* -2*(li.width + horizontal spacing */ }