DIVs, height and float

Question

I have float red divs on blue div like on picture

<div class="blue">
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>

  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
</div>

I want to do, so blue div have height on red DIVs. When I remove float it's OK.

Answer 1

You need to add display:table-cell; or overflow:hidden; to your blue div. This will give the parent the height of it's children.

Demo

like this:

.blue{
   overflow:hidden;
   //or
   //display:table-cell;
}

a sidenote - your divs need a width when they are floating.

You also have the option to make your div with class blue float. But this might cause some unwanted behavior in your document (if the div is not supposed to float).