CODEWITHSUNDEEP
htmlcss
user564376
user564376

Reputation:

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

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.

Upvotes: 153

Views: 143759

Answers (4)

Jehong Ahn
Jehong Ahn

Reputation: 2416

Now, you can

#wrapper { display: flow-root; }

Upvotes: 1

Melih
Melih

Reputation: 774

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%;
}

Upvotes: 11

Quentin
Quentin

Reputation: 944537

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.

Upvotes: 280

SLaks
SLaks

Reputation: 888273

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

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

Upvotes: 62

Related Questions