Question

I have a problem with my CSS layout seen below:

#wrapper { 
 width: 80%;
} 

#content { 
 float: left;
 background: #FFFF00;
 height: 350px;
 width: 70%;
 display: inline;
}

#rightcolumn { 
 background: #EBE3CD;
 height: 350px;
 width: 30%;
 height: 250px;
 float: left;
}

#legendcolumn {
 background: #FF00FF;
 height: 100px;
 width: 30%;
 float: left;
}

The body of my HTML is as follows:

 <div id="wrapper">
  <div id="content">
   Main Content.
  </div>
  <div id="rightcolumn">
   Right Column.
  </div>
  <div id="legendcolumn">
   Here comes the legend.
  </div>
 </div>

 Lorem ipsum dolor sit amet.

Unfortunately, the text lorem ipsum dolor sit amet is placed next to the layout. However, I would like to place the text right below the layout. How can I achieve this without introducing a new div container?

Answer 1

The float and inline contents are causing the issue, but you can control that with The Power of Overflow:

#wrapper 
{  
  width: 80%; 
  overflow: auto;  // overflow + float = magic happy land
}  

Edit: You can see why display:block and clear:both won’t work if you add a border: 1px solid red; to #wrapper. One of the consequences of float is that the container will collapse to the height of it’s non-floating children (zero here). Block and Clear will have zero apparent affect (block would have anyway – divs are natively block) if the element they reference is zero height. Overflow auto overcomes this.