49

I can’t seem to auto-grow my parent div’s height based on its floating child divs. All the children are floating, to take up space horizontally, and then wrapping to the next line. There can be a changing number of floating children, and the parent has to auto-size its height. (The parent div serves as a background for all the floating divs). There is also a second div below the parent div that needs to be pushed down, so that it is below the floating divs.

It’s of major importance that the solution works in IE.

Lypyrhythm
  • 324
  • 2
  • 13
Louis van Tonder
  • 3,664
  • 3
  • 31
  • 62

6 Answers6

110

If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:

.parent {
    overflow:hidden;
    width: 100%;
}

Read this article for more: http://www.quirksmode.org/css/clearing.html.

HaveSpacesuit
  • 3,572
  • 6
  • 40
  • 59
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 2
    This works, although you might also need a "display: block" if your element doesn't already have that set. However, the clearfix techniques described below are definitely to be preferred: overflow:hidden won't work if you've got e.g. any dropdown menus that need to, well, overflow! – J-P Jun 02 '14 at 09:08
  • Although I am using the same thing, how we will achieve the same, when we need some content outside it (means `overflow: visible;`)? – Rohit Sharma Sep 20 '17 at 11:40
  • 1
    This is awesome. But *how* does it work? The linked pages don't really help. – rinogo Mar 12 '18 at 20:21
51

You could insert a div that clears the floaters after the last child.

HTML:

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

fiddle: http://jsfiddle.net/Rc5J8/

Andreas Eriksson
  • 8,979
  • 8
  • 47
  • 65
  • Isn't there a better solution for this. Now I have to add a empty `div` which looks like bad HTML. – botenvouwer Feb 18 '14 at 10:18
  • 2
    Apply the class clear fix to the floated element and try the following clearfix class. http://stackoverflow.com/questions/8554043/what-is-clearfix – Christos Hrousis Feb 19 '14 at 02:28
  • This is the answer you need if you're going to use position:sticky with elements within the div, which won't work if you use the overflow:hidden/auto method – TimWhiting May 08 '18 at 21:28
13

You need to clear floated elements the height of their parents will collapse.

The current accepted answer is correct, however it's usually a better idea to clear floats by applying the clearfix hack or overflow: hidden to a wrapping parent element so that margins continue to functions as expected, and to get rid of an empty HTML element.

The overflow-method:

CSS:

.wrap { overflow: hidden }
.box  { float: left; }

Markup:

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

The clearfix-method, as linked above:

CSS:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

Markup:

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>
Nils Kaspersson
  • 8,816
  • 3
  • 29
  • 30
  • So `overflow:hidden` is the way to make a container grows to fit its floating children, when the container does not have a fixed height. Finally, this is the alternative to `overflow:auto` which should only be used when the container has a fixed height. Thanks for the `overflow:hidden` tip. Unfortunately, although it works, I can't find a W3C reference which can back it up. – Hibou57 Jan 12 '16 at 15:22
3

Adding the overflow css property on the parent element will fix the issue (no need for an empty & ugly div element to clear the float) :

.parentelement {
    overflow:auto;
    display: block;
    width: 100%;
}

I added the display and width properties because some browsers will need theses properties to be defined.

Chtioui Malek
  • 11,197
  • 1
  • 72
  • 69
3

You should use the clearfix technique on the containing div

http://www.webtoolkit.info/css-clearfix.html

That removes the need to add extra markup.

Adam Pope
  • 3,234
  • 23
  • 32
1

You need to apply clearfix to the parent as floats are removed from the flow of the document an don't automatically add any height to the parent's contents. Clearfix instructs teh parent to extend to a height tall enough to clear its last floated child. This method is well established and works across browsers.

wheresrhys
  • 22,558
  • 19
  • 94
  • 162