Wrapper div height is 0 with floated elements inside

css, css-float, html

Solution

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>

Problem

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

Original source

Related problems