Question

I’m trying to put together a small thumbnail gallery and have run into a slight snag. Structure is very basic and is as follows:

[parent container]
[x number of child elements]
[/parent container]

I want my child elements to load into the parent container like so:

example 1
[0][2][4][6][8]

[1][3][5][7][9]

What I want to know is if there is a pure CSS solution to this or if I’ll have to position my elements with javascript.

Knowing that the browser wants to load the items in like this

example2
[0][1][2][3][4]
[5][6][7][8][9]

I’m pretty sure that there isn’t a non-javascript way of achieving this but I wanted to ask if anyone had any ideas or experience with this kind of layout.

The ultimate goal is to accomplish 2 things:
1. Have the parent container grow horizontally as new elements are added to it.
2. Keep the 2 row layout as described in example 1.

Answer 1

See update below

I think I came to a pure CSS3 solution, involving 3d transformation: you can look a webkit only demo here: http://jsfiddle.net/7fUxz/

basically, the idea behind this demo is starting from a basic element displacement, floating both wrapper and children elements – I used <ul><li> for the sake of simplicity and made a clear:left starting form li:nth-child(2n+1) – in this way:

[0][1]
[2][3]
[4][5]
[6]...

then I rotateZ the ul so that the whole list is rotated by -90deg and then repositioned with translateX/Y for the right alignment.

But also list items will be rotated: so an inverse Z-rotation is applied to every <li>. Another rotation of 180deg along X-axis is also necessary to give list-items the correct order. Even in this case some adjustments with X|Y translation is needed

The result is

[0][2][4][6][8]
[1][3][5][7]...

In 3rd revision of the fiddle http://jsfiddle.net/7fUxz/3/ you can see how to adjust some properties on the list so that the elements before and after are correctly positioned.

Note: this demo is working only on webkit. For a list of browser supporting 3D-transforms look at http://caniuse.com/transforms3d

Update

I’ve done further experiment: if you apply a float:right (instead of float:left) to each <li> 3D Transformations are no longer needed (because elements are already in the right order by row when <ul> is rotated) and the css rules are greatly simplified

[1][0]
[3][2]
[5][4]
...[6]

so this fork

http://jsfiddle.net/fcalderan/2BDxE/

has an increased support (surprisingly even more respect CSS3 *-columns usage), since it works even on Firefox 3.5, Opera 10.5 and probably MSIE 9 (I haven’t tested this) : http://caniuse.com/transforms2d .

For older IE consider to serve an alternative style (via conditional comments) or some kind of js/activeX effect using Matrix Filter