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;}