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

• 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

• . 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

• 3D Transformations are no longer needed (because elements are already in the right order by row when
  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