0

http://jsbin.com/aruvo4/5

How can I make the 3rd div go immediately under the first div?

mskfisher
  • 3,291
  • 4
  • 35
  • 48
SuprDewd
  • 269
  • 6
  • 12

4 Answers4

1

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

Sotiris
  • 38,986
  • 11
  • 53
  • 85
  • The longer divs don't have any class. The text they contain vary in length. Should have made that clearer. Thank's anyway. – SuprDewd Feb 04 '11 at 11:09
  • @SuprDewd in your first example it had. You can't add a class for the long div? If not you can use javascript to select and apply it properties, or using `nth-child()` pseudo-class, to select it, like `div#wrapper div:nth-child(2) {float:right;}`. But this will not work for ie8 under below. – Sotiris Feb 04 '11 at 11:16
  • I can't use :nth-child() because some divs are longer than other, and I don't have a way of detecting which of them are. The number of divs may also varies. – SuprDewd Feb 04 '11 at 11:19
  • @SuprDewd you can use javascript to detect the height of each element. – Sotiris Feb 04 '11 at 11:20
  • That's my last resort... Is there really no better way of doing this? – SuprDewd Feb 04 '11 at 11:23
1

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.

0

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.

mut1na
  • 795
  • 6
  • 21
0
<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div id="big_div>
</div>

#big_div { float:right;}
LightningWrist
  • 937
  • 4
  • 20
  • 37