Why is the parent div height zero when it has floated children

HtmlCss

Html Problem Overview

I have the following in my CSS. All margins/paddings/borders are globally reset to 0.

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

Now when I write my HTML as

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

the page renders correctly. However, when I inspect the elements, div#wrapper is shown as being 0px high. I would've expected it to expand till the end of div.content and div.lbar... Why does this happen?

Again, the page renders fine. This behaviour just perplexes me.

Html Solutions

Solution 1 - Html

Content that is floating does not influence the height of its container. The element contains no content that isn't floating (so nothing stops the height of the container being 0, as if it were empty).

Setting overflow: hidden on the container will avoid that by establishing a new block formatting context. See methods for containing floats for other techniques and containing floats for an explanation about why CSS was designed this way.

Solution 2 - Html

Ordinarily, floats aren't counted in the layout of their parents.

To prevent that, add overflow: hidden to the parent.

Solution 3 - Html

I'm not sure this is a right way but I solved it by adding display: inline-block; to the wrapper div.

#wrapper{
	display: inline-block;
	/*border: 1px black solid;*/
	width: 75%;
	min-width: 800px;
}

.content{
	text-align: justify; 
	float: right; 
	width: 90%;
}

.lbar{
	text-align: justify; 
	float: left; 
	width: 10%;
}

Solution 4 - Html

Now, you can

#wrapper { display: flow-root; }
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Deploying my application at the root in Tomcat

JavaTomcat

Next Solution:

What is the proper way to check for existence of variable in an EJS template (using ExpressJS)?

node.jsExpressEjs

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser564376View Question on Stackoverflow
Solution 1 - HtmlQuentinView Answer on Stackoverflow
Solution 2 - HtmlSLaksView Answer on Stackoverflow
Solution 3 - HtmlMelihView Answer on Stackoverflow
Solution 4 - HtmlJehong AhnView Answer on Stackoverflow