min-height не работает при float:left

[brussnika]

Всем привет,

 

мучаюсь с min-height в двухколоночном макете. Буду очень благодарна за подсказку!

 

Суть: в div вложены две колонки (у правой - float:left). Диву задана min-height, но он все равно "держит" высоту по той колонке, где меньше контента.

 

То есть, получается так:

А мне нужно, чтобы область с рамкой растягивалась в соответствии с кол-вом текста, но всегда была больше 100px.

Если убрать float:left у сайдбара, сайдбар пропадает... зато все растягивается как надо )

В общем, запуталась.

 

HTML:

<div class="main">    <div class="maincontent">        <div class="bigpic">            IE8, Opera, Safari, Мозила - расчет ведется от body, т.е. если у него height меньше min-height главного div'a, то соответственно и остальные элементы будут иметь далеко не ту высоту, которая нужна. В реальном проекте содержимое главного div'a полностью указано в процентах, т.е. все элементы сохраняют свое положение друг относительно друга, таким образом внешний вид сохраняется таким как надо... Ну или почти... min-height главного div'a никак не учитывается, а это не есть то, что требуется...Какие могут быть причины такого странного поведения Safari в первом случае и почему игнорируется min-height во втором? Причем как игнорируется - только если надо рассчитать значения height внутренних элементов, сам же div сохраняет свой height равным min-height.        </div>        <div class="sdbr">Какие могут быть причины такого странного поведения Safari в первом случае и почему игнорируется min-height во втором?       </div>    </div> </div>

CSS:

.main {margin:0px 380px; width:1159px; min-height:100px !important; height: auto! important; margin-top:15px; filter: alpha(opacity=90); background-color: rgba(253, 253, 253, 0.9);  font-size:0.857em;       border: 1px solid #fefefe;	    border-radius: 20px;	    -moz-border-radius: 20px;	    -webkit-border-radius: 20px;	    -khtml-border-radius: 20px;	    behavior: url(PIE.htc);      box-shadow: 0 0 7px 2px rgba(122,122,122,0.5);}.maincontent {padding: 25px 25px; min-height:100px !important; height: auto! important;}.bigpic {width:784px; float:left; padding-right:20px;}.sdbr {padding-left:803px;}

Edited February 16, 2014 by brussnika

[wendigo]

Нужно в .maincontent добавить

overflow:auto;

http://jsfiddle.net/euv56/

[Николя223]

В терминах верстки не селен, путаться могу) но насколько я помню - там что то про сброс потока. Самый простой способ - задание overflow

http://jsfiddle.net/nikolya223/x7PT2/4/

 

А вообще - давным давно , читал как Alexriz, писал про способ который Selenit придумал. Модераторы если можно киньте ссылочку

[brussnika]

Ого, вот это сервис! Первый раз вижу. Круто.

 

Добавила

overflow:auto;

Но заработало после того, как передвинула восклицательный знак вот в этой строчке:

height: auto! important;

=)

 

Спасибо большое, уважаемые!

[vera17]

Я бы добавила  clearfix к блоку обёртке maincontent  http://jsfiddle.net/euv56/1/ 

О clearfix   http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

Edited February 16, 2014 by vera17