CSS: Floating divs have 0 height

Question

I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:

HTML

<div id="outer">     <div id="left">          ...     <div id="right"> </div> 

CSS

#outer{     background-color:rgba(255,255,255,.5);     width:800px; }  #left{     float:left; }  #right{     width:500px;     float:right; } 

However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?

Answer 1

It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.

You can use the overflow style to make the parent element take the floating elements in consideration:

#outer { overflow: auto; }