Question

I want to split a series of divs vertically:

My HTML might look like this:

<div>A</div>
<div>B</div>
...
<div>G</div>

I want them to look like this

A D G
B E
C F

The number of elements is arbitrary and I would like to avoid having to add extra attributes on certain of the divs if possible, as that would increase complexity greatly.

I’ve looked at the CSS3 columns option, but is there any way to do this without CSS3? I would prefer to avoid Javascript libraries as well.

Answer 1

Assuming that you want it to be dynamic, there is no sane way to replicate such a layout without relying on CSS3 Columns or JS (plugin or otherwise).

tbowman’s suggestion of using floats and specified widths would result in a different order of items:

A B C
D E F
G

This could however work perfectly well if you could use jquery to rearrange the items wrap items into columns as needed (the logic could be replicated in vanilla javascript). Bonus points if you use AJAX to retrieve this content and wrap content into columns before they’re added to DOM so that there’s no annoying flicker.

var $container = $('#container'); //assuming this is the parent
var $content = $container.children();
var itemsPerColumn = (Math.ceil($content.length / 3));
for (var i = 0; i < 3; i++) {
    $content.slice(i * itemsPerColumn, (i + 1) * itemsPerColumn)
    .wrapAll('<div class="column" />');
}

Fiddle’d with delayed rendering for comparison. Page would remain usable with “normal” layout if js fails for some reason.