Вопрос по float

[ВалекFCRK]

Здравствуйте. Имеется вот такой код страницы.

<div class="products">			
    <div class="content_product">					
    </div>
    <div class="content_product">
    </div>				
</div>		

И вот такой css .

.products
{
width: 701px;
margin: auto;
}
.content_product
{
width: 229px;
height: 261px;
background: #000;
float: left;
}		

Проблема в том. Что с float: left; класс products не хочет растяиваться в высоту. Границы класса content_products выходят за рамки products. Но без float, высота автоматически настраивается . И content_products не выходит за рамки. Предлагать мне сделать height у класса products не нужно, так как content_products возможно огромное количество, и products должен автоматически растягиваться в высоты. Спасибо

[notHaker]

Сообщение от ВалекFCRK

класс products не хочет растяиваться в высоту. Границы класса content_products выходят за рамки products.

Такова суть плавающих блоков, контейнер попросту схлапывается. Используйте inline-block вместо float блоков.

[Лубышев]

.products{overflow:hidden;}

[Лубышев]

Такова суть плавающих блоков, контейнер попросту схлапывается. Используйте inline-block вместо float блоков.

inline-block не держут ослики. а это значит надо хак. а хак не есть айс) если можно без хака, давайте лучше без хака)

[notHaker]

Сообщение от Лубышев

.products{overflow:hidden;}

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

[Naive]

Сообщение от notHaker

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

оверфлоу растянет внешний блок под флоаты.
Засада только в том, что оверфлоу работает очень медленно и будет ререндериться при любых манипуляциях dom.

inline-block не держут ослики. а это значит надо хак. а хак не есть айс) если можно без хака, давайте лучше без хака)

ИЕ7 и ниже да, только это уже меньше 1% аудитории в рунете.
А что касается хака, дак это просто преступление не юзать такую маленькую очаровательную хернюшку как

*display: inline;
zoom:1;

[Лубышев]

оверфлоу работает очень медленно и будет ререндериться при любых манипуляциях dom.

не замечал медленности) все всегда быстро работает. ну тем более думаю ТС не будет мегасервис делать с кучей AJAX и т.п. типа яндекс карты)

[notHaker]

Сообщение от Лубышев

.products{overflow:hidden;}

Прошу прощения, вы мне порвали шаблон

[Naive]

Сообщение от Лубышев

не замечал медленности) все всегда быстро работает. ну тем более думаю ТС не будет мегасервис делать с кучей AJAX и т.п. типа яндекс карты)

Если оверфлоу один, то проблема не будет заметна. Но если сверстать, скажем главную страницу интернет-магазина, со всякими там акциями, спецпредложениями, аукционами, на стиле float + overflow:hidden; то безобидный таймер (а-ля до конца акции осталось 20минут 42 секунды) каждую секунду будет вызывать рекусивную перерисовку каждого оверфлоу. На мощной машине в хроме еще можно этого не заметить, но какой-нибудь ИЕ8 на древнем пне вызовет садом и гомору.
И AJAX тут не при чем =).

Сообщение от notHaker

Прошу прощения, вы мне порвали шаблон

inline-block тоже натянется на флоаты

[ВалекFCRK]

Всем спасибо за полный ответ) Остановился на inline-block