Div floating problem

http://jsbin.com/aruvo4/5

How can 开发者_C百科I make the 3rd div go immediately under the first div?

you can add float:right; for the #wrapper .long

example: http://jsbin.com/aruvo4/4

Also, add overflow:auto for your #wrapper to clear the floats. http://www.quirksmode.org/css/clearing.html

Here's a CSS3 solution for you:

#wrapper { width: 200px; overflow: auto; }
#wrapper div { float: left; background: pink; min-height: 80px; width: 80px; margin: 5px; padding: 4px; }
#wrapper div:nth-child(2) { float: right; }

For a cross-browser solution, though, you'll need to add a class to the div I've floated right

:nth-child browser support

IE8   FF3.5+  SA3.1+  OP9.5+  CH2+
None  Full    Full    Full    Full

-- edit --

Just read some more comments on here and seen that you can't use the pseudo class. I'll keep the answer here though as it will work in other cases.

Organize it as you would a table (i.e., place div tags around your 'rows') and set the div's display properties to table-row and table-cell as appropriate. The long cell needs to have top and bottom =0 and position set to absolute. There also needs to be a blank cell holding the place of the long allowing it to stretch down.

Here's a complete explanation.

<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div id="big_div>
</div>

#big_div { float:right;}