15
May '12

Putting Data in Columns with CSS

It amazes me how many people online are saying that CSS won’t natively support columns of data using lists. Everything from tables to Javascript functions are being suggested but it’s actually very very simple to do. To make the LI elements within and OL or UL list arrange themselves into two equal columns all you need to do is this:

li {
    float: left;
    width: 50%;
}

Equally to arrange themselves into three columns you just need to adjust the width value like so:

li {
    float: left;
    width: 33.3%;
}

I’m sure you’re getting the idea!

Leave a Reply