Page 1 of 1

CSS write variable height sequentially.. display 2 columns

Posted: Wed Sep 05, 2007 9:20 am
by CoderGoblin
OK I have a problem with css...

Given a list of '<li>XXXX</li>' where XXX is normally a block of information containing paras and an optional image I need to create 2 columns with the blocks organised horizontally and without specifying the which block goes into which column.

Example:

Code: Select all

block1..........block2
block3..........block4
block5..........block6
If all the blocks are the same size no problem. Problem is when the blocks are not the same size, especially if they have an image. The best I can come up with is:

Code: Select all

block1...........block2 with image
blankspace....
block3...........block4
block5...........block6
This uses floats and I have tried other techniques. Does anyone know if it is possible to get rid of the blankspace so block3 moves up, Block4 moves to the first column block5 to the second etc. Any float examples I have seen rely on things being the same height.