Question

I have a HTML layout puzzle on my hands. I have a large alphabetical list, generated by my PHP app, and I need to output it on a web page. The markup generated look like this:

<div class="list_item">A</div>
<div class="list_item">B</div>
<div class="list_item">C</div>
<div class="list_item">D</div>
<div class="list_item">E</div>
<div class="list_item">F</div>
<div class="list_item">G</div>
<div class="list_item">H</div>
...

The stylesheet looks like this:

.list_item {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;

    width: 200px;
    float: left;
}

Rendered result:

As you can see, this is not very readable, I would expect DIV’s to be outputted in two columns, so the first columns would contain “A B C D” and the second one “E F G H”.

Is there a way to do this, without changing the markup? It’s possible, to add different class, to even and odd divs, but since divs are outputted in a loop, theres is no way split them differently.

See a demo: http://jsfiddle.net/KZcCM/

Note: I already solved it by splitting the list in two parts by PHP, but I want to know, if there is a HTML/CSS solution here.

Answer 1

Depending on which browsers you need to support, you can use the new CSS3 column-count property.

With a simple list mark up

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

Use this CSS:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Here is a fiddle – although it’s not supported in any version of IE yet. To support older browsers there are jQuery solutions, such as Columnizer jQuery Plugin, that you can use as well as, or instead of the CSS3 solution,