Div, height and float

Question

I have floating red divs on a blue div, as in the 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 the blue div has a height above the red divs. When I delete the float, it is OK.

Answer 1

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

Demo

like this:

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

a sidenote - your divs should have a width when they float.

You also have the option of making your div with a blue class float. But this can lead to unwanted behavior in your document (if the div should not float).

Answer 2

Just float the blue div:

 .blue{ float: left; } 

Then he will turn around to take the height of his children.

If float is not a parameter , I would set display to inline-block so that it behaves the same as a floating element.

 .blue{ display: inline-block; } 

Link: https://developer.mozilla.org/en-US/docs/CSS/display

Answer 3

This is a very common problem known as the clearfix problem. More information can be found here (for example): Incorrect display of Div in Firefox

In short, you should add the .clearfix class to the parent (blue) div, which looks something like this:

 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } &:after { clear: both; } 

This one is "borrowed" from Twitter Bootsrap, there are many alternatives. Why and how it works, I suggest gofix for cleaning.

Note that there are other “fixes,” such as working with inline blocks , adding overflow: hidden or even displaying as a table-cell . Although they may work in some situation, they almost all have other side effects or not completely cross browsers, so they should be used with caution.

Answer 4

If you need something clean and dynamic, try the following:

 <div class="blue"> <div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> </div> 

And this:

 .blue {background-color: blue;text-align: center;display: inline-block;padding: 5px;} .blue > div > div {background-color: red; width:100px; height: 50px; margin: 10px;display: inline-block;} 

Jsfiddle example

Answer 5

Another option without compatibility in all browser options, but without the need for float: left

 .blue{ background-color:blue; overflow:hidden; width: 140px; display: flex; justify-content: space-around; flex-wrap: wrap; } .blue div{ background-color:red; margin: 2.5px 0 2.5px 0; width:40px; } 

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