Я пытаюсь разместить 2 элемента div рядом друг с другом, чтобы у меня было 2 столбца текста, а внешний элемент рисовал границу вокруг них обоих:

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

Тем не менее, внешний div регистрирует высоту 0px, и поэтому граница не обходит другие div. Как мне заставить внешний div распознавать высоты вещей внутри него?