CODEWITHSUNDEEP
csscss-float
SuprDewd
SuprDewd

Reputation: 269

Div floating problem

http://jsbin.com/aruvo4/5

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

Upvotes: 0

Views: 147

Answers (4)

user527892
user527892

Reputation:

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.

Upvotes: 1

LightningWrist
LightningWrist

Reputation: 937

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

#big_div { float:right;}

Upvotes: 0

mut1na
mut1na

Reputation: 795

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.

Upvotes: 0

Sotiris
Sotiris

Reputation: 40036

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

Upvotes: 1

Related Questions