Floating divs and unwanted space

Question

I have several floating divs, which are graphically arranged thusly (their hierarchy in the code is indicated by numbers):

(1)top left div - (2)div - (3)top right div
(6)bottom left div - (4)div - (5)bottom right div

All divs are currently floating left contained in a wrapper. The problem I'm having is that the bottom left box is lower than where it ought to be. I know why; the last box is floating left of the bottom right and so it's getting shoved down out of the layout. My question is how do I get that div back up to where it belongs.

Basically the divs are outputting as such:

•••
 ••
•

You should also know that the top left div is taller than the other two top divs, and the bottom left div is shorter than the other two bottom row divs.

Answer 1

Based on the source order, the only way you'll be able to do this is by specifying a negative margin for the top of the 6th div - if all your heights are measured and it should fit exactly, you'll probably just specify the height for the negative margin.

Answer 2

I'm assuming that you're seeing the boxes like this:

| 1 | 2 | 3 |
|   | 4 | 5 |
| 6 |

Your second row of floats is floating against the right side of the first div, which you say is longer. There are a few solutions:

1. Add a clear: left on the first div in the row.
2. Wrap each row in a div that's styled with a clear: left.
3. Set a fixed height on the divs, to prevent having a longer one sticking out and messing up the layout.

Answer 3

If what you're looking for is for these floated divs to perfectly fill all the space, that's not going to happen without some wonkiness. The moment one div is taller than the others, the remaining items will no longer be all touching. It's happening just as expected: once a series of floats hits the right side of the document, the next floated item appears on the left side underneath the floats in the previous row. Forcing the float on the third line up so it appears to be part of the second line is possible, but isn't going to handle various screen sizes very well...

If you really need 3 columns, why don't you create 3 columns, and float a top and bottom element in each column? Then everything will stack the way you expect. Something like this:

| 1 | 3 | 5 |
| 2 | 4 | 6 |