Parent Height doesn't follow their float children

Question

My mainContainer height doesn't follow their children width

and here is my code do you have any suggestion please advise.

I need the CSS solution not JavaScript so thank in advance

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

and here is my css

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}

You could apply a clearfix to the element. Your height of parent won't adjust to floating elements standardly. — Kai Qing, May 11 '13 at 03:34

Kevin Boucher · Accepted Answer · 2017-08-11T21:51:59.823

84

Add overflow:hidden; to the container:

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

Because its content is floated, the container div collapses. Using a 'clearfix' class or, as I mentioned, adding overflow:hidden will cause the container to contain the floated elements.

UPDATE Explanation of why this works can be found here: https://stackoverflow.com/a/9193270/1588648

... and here:

In order for them (browsers) to calculate what overflowed the bounds of the block (and thus should be hidden), they needed to know the size of the block. Because these blocks do no have an explicit height set, the browsers used the calculated height of the content instead.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

edited Aug 11 '17 at 21:51

answered May 11 '13 at 03:32

Kevin Boucher

16,426
3
48
55

4

WOW That Save my life. I have sit for 3 hours for nothing Thank a lot @Kevin Boucher – Jongz Puangput May 11 '13 at 03:36
1

But can you describe more about why overflow:hidden solve this issue how the way it make a container to contain the floats. – Jongz Puangput May 11 '13 at 03:39
1

@JongzPuangput Never found a satisfactory answer to why this works. Here's a couple of articles: http://www.impressivewebs.com/clearing-floats-why-necessary/ http://css-tricks.com/all-about-floats/ – Kevin Boucher May 11 '13 at 03:49
What if overflow hidden is not an option (because content is below the window and not visible (and also not scrollable)). Adding `:after` and `clear:both`also doesn't work – nclsvh Jul 26 '16 at 14:52
@NicolasV If you can recreate the issue in jsfiddle or somewhere, I can take a look at it. – Kevin Boucher Jul 26 '16 at 21:15
@KevinBoucher Kev, sorry but my issue was rather urgent, had to find another solution fast so I changed some stuff around.. Initial project isn't mine so I didn't quite understand the code very well. Thx anyway – nclsvh Jul 27 '16 at 09:16
I know this is old but I have the problem now myself and was searching for solutions. In the container add an empty div tag with clear:both. It will clear the previous floats and thus the container will wrap around its children. – LearningMath Oct 27 '17 at 05:00
1

I could kiss you. I had the following layout with flexbox elements and floated images: [section] > [container] > [column] > [floated image] I was noticing the image's parents weren't collapsing in IE 11. Setting 'overflow: hidden' on the section, container, and column elements did the trick! – Ben Walters Dec 01 '17 at 02:52

score 12 · Answer 2 · edited May 23 '17 at 12:34

12

You need to clear your floating elements, use overflow: hidden; for #mainContainer

Demo

Alternate : (You can add clear: both; to clear floats)

Demo

Or you can also self clear floating elements (Only if you wish to support IE9=+

.clear:after {
  content: "";
  clear: both;
  display: table;
}

Why this happens?

edited May 23 '17 at 12:34

Community

1
1

answered May 11 '13 at 03:33

Mr. Alien

153,751
34
298
278

2

That's how it should be done! `overflow: hidden` could... well.. just hide content. – Andre Zimpel Dec 11 '15 at 23:15

score 4 · Answer 3 · answered May 11 '13 at 03:37

4

Use overflow: hidden and clear a float

#mainContainer{
    width: 1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden;
    clear: both;
}

answered May 11 '13 at 03:37

Tamil Selvan C

19,913
12
49
70

Parent Height doesn't follow their float children

3 Answers3

Linked

Related