CSS - относительный позиционированный родительский div не растягивается до абсолютной высоты дочернего div

Я собираюсь все это утро и не могу заставить его работать:

У меня есть родительский DIV с относительным позиционированием и двухуровневая дочерняя DIV-настройка внутри него, обе позиции Absolute. Мне нужно, чтобы родительская высота DIV растянулась с содержимым внутренних DIV.

Я попытался положить бит типа .clearfix перед закрывающими тегами для #content, но я ничего не плаваю. Я также попытался добавить атрибут float в div #content безрезультатно. Может ли кто-нибудь указать мне правильное направление здесь. Очевидно, что я пропускаю что-то с тем, как вложенные показы влияют друг на друга.

CSS

#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}

#leftcol { 
width: 500px;
position: absolute;
}

#rightcol {
width: 270px;
position: absolute;
left: 500px;
margin-left: 10px;
text-align: center;
}

HTML:

<div id="content">

<div id="leftcol">
<p>Lorem Ipsum</p>
</div><!-- /leftcol -->

<div id="rightcol">
<img src="images/thumb1.jpg">
<img src="images/thumb2.jpg">
</div><!-- /rightcol -->

<br style="clear:both;">

</div><!-- /content -->

Ответы

Ответ 1

Темная сторона силы - это путь ко многим способностям, которые некоторые считают неестественными.

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});

Ответ 2

но у меня были странные результаты. то я нашел сообщение, которое делает его намного проще и совершеннее во всех браузерах.

Установите дочерние divs в float: left/right. Затем поставьте "overflow: hidden" на родителя. Поскольку вы не указали высоту, она просто полностью завершит дочерние элементы. Я не использую очищение уже давно.

Ответ 3

Ваши разделители столбцов не будут влиять на их содержащий div, когда у них есть абсолютные позиции, поскольку они удалены из обычного потока страниц.

Вместо этого попробуйте использовать их, а затем div с ясными: both; после них.

Ответ 4

Я только что боролся с этим какое-то время и нашел реальное решение CSS-только для того, чтобы изменить положение "абсолютных" divs на "относительные". Это действительно работает!!!

Протестировано на Mac, используя Safari 5.1.5 и Chrome 21.0....

Надеюсь, это поможет кому-то другому.

Ответ 5

Вам не нужно position: absolute для этой задачи.

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol { 
    width: 500px;
    float: left;
}

#rightcol {
    width: 270px;
    position: relative;
    margin-left: 510px;
    text-align: center;
}