Проблемы с обтеканием (float)

[dexteron]

Здравствуйте уважаемые форумчане.

На днях возникла проблема. На страничке сайта блоки выходят за пределы основного блока (их там несколько, у всех стоит высота auto).

В первого блока все нормально, он вписывается в основной блок, а во всех остальных не все так гладко.

Вот скрин:

http://s2.ipicture.ru/uploads/20111213/GU3mxdLE.jpg

Я так понимаю все из-за обтекания блоков со 2-го по остальные. Если я меняю float на none, то блоки со 2-го выстраиваются в горизонтальном порядке, один под другим и при этом основной блок растягивается на всю высоту. мне то нужно чтобы они были как сейчас на скриншоте только основной блок был бы растянут на всю высоту.

Надеюсь вы сможете прочитать и понять мою проблему

Заранее спасибо.

[DStereo]

Решил не создавать новую тему, написать здесь. Есть небольшая трабла с блоками float.

Ситуация такая, допустим у нас есть такой код:

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

У всех блоков inner стоит float:left и получается что у outer высота 0, если её не задавать явно.

Каким образом можно сделать чтобы у блока outer высота задавалась в зависимости от контента в блоках inner?

Моё решение такое: делаем, ещё один блок inner, у него задаём clear:both (желательно задать ему какую-нибудь высоту), в итоге он встанет вниз, а

контент в в других inner-ах будет двигать этот блок вниз.

<div id="outer">
 <div id="inner1"></div>
 <div id="inner2"></div>
 <div id="inner3"></div>
 <div id="inner4_special" style="clear:both"></div>
</div>

У кого какие ещё идие есть?

.

В большинстве случаев распространен вариант добавления overflow:hidden для родительского блока, т.е. для outer в вашем случае. Но у него есть свои подводные камни. Можно так же добавить элемент который будет отменять обтекание, как сейчас у вас предложено, но это дополнительная разметка. Есть еще вариант с добавлением псевдо-элемента.

[aski]

DStereo, можете рассказать подробнее что за вариант с добавлением псевдо-элемента? Или ссылку, где есть описание.

[Softlink]

aski,

1) для каждого вопроса своя тема - это обязательно.

2) один из вариантов(с overflow:hidden) вам подсказали, про вариант с ПЭ написано здесь

3) делать на инлайн-блоках.

[DStereo]

DStereo, можете рассказать подробнее что за вариант с добавлением псевдо-элемента? Или ссылку, где есть описание.

Использование псевдо-элемента заключается в дабавлении кода к блоку outer

#outer:after{
    clear:both;
    content:'.';
    display:block;
    height:0;
    visibility:hidden;
}

Но этот код не работает в ie7, так как ie ниже 8 версии не поддерживает псевдоэлементы :after и :before.

[hedgehog]

Но этот код не работает в ie7, так как ie ниже 8 версии не поддерживает псевдоэлементы :after и :before.

Зато работает hasLayout. Например:

height:1%;

zoom:1;