View Full Version : Extra vertical space when floating multiple boxes

11-02-2006, 05:50 PM
I am trying to float about 10 boxes left in a way that will make them line up into two columns. I have set the main wrapper box to an appropriate width, and set the width and margin of the class which all of the boxes will be, so that there is enough room for two boxes to line up next to each other, before the next one is bumped down. The problem is, the boxes are all different heights, so if, for instance, the first box is 200px high, and the second is only 100px high, the third box will be bumped down below the second box, but still "stuck" to the right of the first box. This is still ok, but if the third box is 150px high, it sticks out lower than the first box. So then the next box, rather than being directly below the first box, is below it, but with enough vertical space so that it is below the third box... and I don't want that vertical space.

Here's a picture of what I mean:

So you can see there is vertical space between box 1 and box 4, because box 4 apparently has to be below box 3.

Does anybody have any idea how I could get rid of that vertical space? I can't split the "wrapper" div into two columns and just put half the boxes in each one, because the boxes are created dynamically by a PHP loop from MySQL data.

11-02-2006, 06:26 PM
Why not add another two div's inside the wrapper div, floated to each side to create the two columns? Then add div's inside them as neccesary (as they are block elements they will just fall under eachother anyway).

11-02-2006, 06:30 PM
Well, like I said, the boxes are created by a PHP loop pulling data from MySQL, so I don't really have as much detailed control over which boxes go where... they just all plop down wherever my PHP code is.

11-02-2006, 06:32 PM
Oh I see; no way to alter the PHP then? Would be a lot easier if you had full control over the source.

11-02-2006, 06:33 PM
No, I can alter the PHP. I was kind of thinking I could make a code that names every other one a different class, and then I could float one class left and the other class right, but I haven't tried that yet. Any ideas?

11-02-2006, 06:41 PM
Ah, my idea worked. Case closed! Thanks for the help.

11-02-2006, 06:55 PM
Ah glad you sorted it! :)