Question

I have two divs, one with float: left and the other one with float:right. They display side-by-side, but when I add a third div it displays over the two floating divs and not behind as i’m trying to.

<div id="left_side"  style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>

What I want to do: http://dl.dropbox.com/u/20836988/intended.png

what I actually get: http://dl.dropbox.com/u/20836988/what%20i%20get.png

I’ve tried adding vertical-align: bottom to the last div without results. Also I’ve tried adding a div containing the two float divs and then the third div but I always get the same result. I’m sure it must be a very basic question but I can’t find the answer anywhere…

Answer 1

below_side needs a float and a clear:both;

currently left and right are floated – which takes them out of the document flow. which means that below side ends up in the wrong spot.

if you put the float: left on the below-side it will also take it out of the docment flow and put it in the same space as the left and right (relatively) then you add the clear: both so that it appears below left and right