css - Display unordered lists in three columns

Question

I have an unknown number of unordered lists and I want to display them in three columns. A table is one way to go, and I got that working, but I'm considering maybe there is a CSS way of doing this.

The number of items in each list is also different from list to list and is also unknown. I would like advice on marking this up. Is a table the way to go here, or is there a better CSS solution?

Thank you!

isNaN1247 · Accepted Answer · 2011-05-22 12:26:31Z

3

UPDATE:

Sorry minor adjustment - you'll need to clearfix each of the ULs and I would use the CSS3 nth-child pseudo selector to clear every 4th ul. Have updated JS Fiddle also

Try something like this...

CSS:

    #container
{
    width: 600px;
}

#container ul 
{
    width: 200px;
    float: left;
    margin-bottom: 20px;
}

ul:nth-child(4n) {
    clear:left;
}

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

HTML:

<div id="container">
    <ul class="cf">
    <li>foo</li>
    <li>bar</li>
    <li>bar</li>
            <li>bar</li>
            <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
</div>

Here is a JSFiddle link to the above: http://jsfiddle.net/beardtwizzle/9EALs/1/

edited May 22, 2011 at 12:26

answered May 22, 2011 at 11:32

isNaN1247

18.2k13 gold badges75 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arjan Over a year ago

That could give unexpected results if the lists do not all contain the same number of items.

isNaN1247 Over a year ago

@Arjan - good point! Silly on my part ... have updated my answer accordingly

SIFE · Accepted Answer · 2011-05-22 11:26:33Z

2

You can use div's with CSS, here you will find a practical example.

answered May 22, 2011 at 11:26

SIFE

5,7637 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

css - Display unordered lists in three columns

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related