2 row element layout within horizontal div

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 chi

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

Answer 2

Without knowing too much of how the information is being pulled in, there is a pure-CSS way using CSS3 multi-columns. BUt, it's CSS3 and the multi-column module only works with the latest version of Firefox and Webkit browsers; as far as I know IE9 still does not support it.

You can read more about CSS3 multi-columns via the following links and how to use them properly.

• http://www.csscripting.com/css-multi-column/
• http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

There is also a column script that I've used once before, though a bit old, may help you. http://www.csscripting.com/css-multi-column/

Hope this helps!