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; }

Update:

As of 2020 there is a value for the display property that can be used (as @timgl07 pointed out in a comment), that has less unwanted side effects:

#outer { display: flow-root; }