0

http://jsbin.com/aruvo4/5

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

mskfisher
  • 3,177
  • 3
  • 33
  • 47
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
  • 37,572
  • 11
  • 48
  • 84
  • 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.

Scott Brown
  • 7,668
  • 5
  • 46
  • 64
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
  • 929
  • 4
  • 19
  • 36