css - Wrapper div height is 0 with floated elements inside

Question

I have a wrapper <div> which contains two inner <div>s that are floating.

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

The problem is the wrapper <div> has width of 80px since two inner <div> are 40px each. But always the wrapper <div> is 0px in height which makes the border appear like a line at the top.

So I placed the two inner <div>s inside a <table>. It worked well. But how do I avoid this problem without going for a <table>?

Answer 1

Set overflow: hidden on the parent.

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