Wrap floating DIVS

Question

I have 3 divs and all of them are floated to the left. My container can accommodate only 2(intentional) so the 3rd div is pushed below. My problem is the height of 2nd div is more than the other two, and the third div is showing up where 2nd div ends, leaving an empty space between 1st and the 3rd div. I want the 3rd div to wrap around the 2nd div, so that it shows up right below 1st.

I have tried floating the second to the right, and seems like it works, but i wanted to know if there is solution floating all of them to the left.

Just to clarify i have added an image showing the problem in the url below

http://img684.imageshack.us/img684/3209/divs.png

Answer 1

For a simple fix, you can wrap the same element around div1 and div3, assign a width and float left, assign a width to div2 and float it left as well.. assuming source order doesn't matter.

Answer 2

Won't making div1 wider (the same width as div3) solve this?

Answer 3

If you know the exact heights of the divs, you could use a negative top-margin on div3 to bring it up.

#div3 {
    top-margin: -100px;
}

(replace '100px' with the difference between div1's height and div2's height)