CSS Floats Problem

[clarkvan]

This should be really easy. I cant get the blue box to go into the white area using floats.

http://jsfiddle.net/QWqsH/

Thanks!

[tracknut]

I'm not sure there's a way, as you have it. If you put a wrapper around the red box, and put the red and blue boxes inside it, then you could float orange and yellow to the right of them.

Dave

[rtrethewey]

Hardly a fix, but closer: http://jsfiddle.net/QWqsH/1/

[hmsgoddess]

Assuming you want the blue box to be directly under the white and red boxes like a column your problem is that your container height is set too low for the height of the three boxes. I played with it and set the container box to 73px and it fit the blue box right under the white one of the same width. There is a second alternative than setting the height, this involves making a clear div just before the closing of the container tag and removing the height setting altogether on the container.

[Ttawor.com]

the solution i suggest to rearrange the code
and it will be like follow
<div id="container">
<div id="red"></div>

<div id="yellow"></div>
<div id="orange"></div>
<div id="blue"></div>
</div>
and float yellow and orange right
this will fix your problem