Css высота: авто не работает

Внутренние1 и внутренние2 divs находятся внутри внешнего div, но высота внешних показывает как 0px с высотой: auto

как получить высоту дочернего элемента для внешнего div?

код

<style>
#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; 
}
</style>
<div id="outer">
    <div id="inner1"></div>
    <div id="inner2"></div>
</div>

Ответ 1

Поплавьте внешний div. который будет покрывать всю вашу высоту, независимо от внутренних холмов. Но если вы предоставите свое внутреннее свойство div float. то я предлагаю вам использовать 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;
}

попробуйте это, он обязательно будет работать

Ответ 2

Добавьте overflow:auto в div с id outer. Это решит вашу проблему.

Демо