Высота div-оболочки равна 0 с плавающими элементами внутри

У меня есть оболочка <div>, которая содержит два внутренних <div>, которые плавают.

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Проблема в том, что оболочка <div>имеет ширину 80 пикселей, так как два внутренних <div>имеют ширину 40 пикселей каждый. Но всегда обертка <div>имеет высоту 0px, из-за чего граница выглядит как линия вверху.

Поэтому я поместил два внутренних <div>внутрь <table>. Это сработало хорошо. Но как мне избежать этой проблемы, не переходя на <table>?