Why is height:auto not working on 2 floating elements?

Question

The div#inner1 and div#inner2 are inside the div#outer, but still the height of div#outer shows as 0px with height:auto.

How do I get the height of the child elements for the outer div?

This is my code:

#outer {
  width: 300px;
  height: auto;
  background: #ccc;
}

#inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

#inner2 {
  float: left;
  width: 100px;
  height: 100px;
  background: #0f0;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>

Also, have a look at [this](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) — Mr. Alien, Oct 19 '13 at 05:33
As far as the solution goes, here's the answer - http://jsfiddle.net/k8Zmc/ — Mr. Alien, Oct 19 '13 at 05:34
@user2791037 because I already answered :) duplicating the same answers won't make sense right? — Mr. Alien, Oct 19 '13 at 05:44
Here's detailed explanation and examples of "clearfix" solution, suggested by Mr. Alien: http://css-tricks.com/snippets/css/clear-fix/ — Arsen K., Oct 19 '13 at 06:03

score 38 · Answer 1 · answered Mar 09 '14 at 17:03

38

Add overflow:auto to the div with id outer. This will solve your problem.

Demo

answered Mar 09 '14 at 17:03

Sreeja Das

1,234
12
12

Great answer! Just exactly what I was looking for. – NoWar Apr 23 '15 at 15:53
I have to thank you after 5 years of you response, and in the this period of corona virus, you save me from a very long headache – med morad Mar 31 '20 at 09:56

score 9 · Accepted Answer · answered Oct 19 '13 at 05:49

Float the outer div. that will cover your all height, whatever the inner divs holding heights. But if you will provide your inner div float property. then i will suggest you to use the hack clearfix..

    /* Assuming this HTML structure:

    <div class="clear">
        <div class="floated"></div>
        <div class="floated"></div>
        <div class="floated"></div>
    </div>
*/

.clear:before, .clear:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clear:after {
    clear: both;
}

try this it will sure work

Why is height:auto not working on 2 floating elements?

2 Answers2