CODEWITHSUNDEEP
htmlcssxhtml
Elad Lachmi
Elad Lachmi

Reputation: 10561

css - Display unordered lists in three columns

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!

Upvotes: 0

Views: 2786

Answers (2)

isNaN1247
isNaN1247

Reputation: 18099

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/

Upvotes: 3

SIFE
SIFE

Reputation: 5695

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

Upvotes: 2

Related Questions