How to make floating DIV list appear in columns, not rows

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,

Answer 2

Using your markup, a CSS3 solution would look like this:

HTML

<div id="wrap">
    <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>
</div>

CSS:

.list_item {
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

With this method you get the added benefit of the column heights being equal, no matter the content of each inner <div>.

If it's not plainly obvious by all the vendor-specific prefixes, the browser support for this is restricted to modern browsers (the way I like it) so it's not really production-ready code (unless you like to be edgy).

Demo: jsfiddle.net/Marcel/tk2tS

Answer 3

I can't think of a pure CSS solution.

You said:

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.

So, you have the power of PHP. In that case, I would keep the code you already have, but output the elements in a different order:

See: http://jsfiddle.net/xyLkz/

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

How easy that will be depends on how your PHP is structured.

If you have everything in an array, then in this case, you would just have two loops (one outputting odd array elements, the other even ones). If you need support for n columns, that wouldn't be a problem either.

What would be a problem is if you're building the output "on-the-fly", inside the loop. In that case, you'd probably have to resort to buffering the output of each iteration of the loop into an array, and then doing the same double-loop process afterwards.

Answer 4

@ silver

i try for side without using extra markup may it's useful to you

http://jsfiddle.net/sandeep/GGwPq/1/

Answer 5

You don't need to use float for the items, but maybe for a box where the items are located in, try this:

<div style="float: left; width: 200px;">
    <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>
<div style="float: left; width: 200px;">
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

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

    width: 200px;
    /*float: left;*/
}

Edit: now with 2 columns :)