Верстка на div в две колонки, в правой div с clear:both

BAV · March 20, 2008

Имеется две колонки (в левом меню, в правом контент). Есть необходимость в правый блок выводить

каждый из которых должен начинатся с новой строки. Но возникает проблема, если указываю clear:both, то див переносится до уровня конца левого блока. Какой может быть выход?

<style type="text/css">
#menu {width: 270px;background: #e3e8cc;border: solid 1px black;float: left;}
#content {background: #e3e8cc;border: solid 1px black;margin-left: 275px;}
</style>
<body>
<div id="menu">
 hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
hkjh
</div>

<div id="content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
 volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
 facilisi.</p>
 <div style="clear: both;background: red;">1111</div>
 <div style="clear: both;background: green;">2222222</div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>

ZoNT · March 21, 2008

убрал clear:both - вс? заработало...

BAV · March 21, 2008

Так в том то и дело, что у меня в этом диве еще куча всякого конетна, в том числе иногда картинки с float: left; Причем указывать высоту или min-height тоже немогу, т.к. размеры картинок и кол-во текста различные. А в таком случае получается что следующий див, прилипает к картинке слева (т.к. картика вылезает за границы див). Поэтому хочу принудительно заставить див переносится на новую строку.

maddogrts · March 21, 2008

#content {background: #e3e8cc;border: solid 1px black;margin-left: 275px; overflow: hidden}

BAV · March 21, 2008

Тогда уже

#content {background: #e3e8cc;border: solid 1px black;_margin-left: 275px;overflow: hidden;}

НО это не ребаотает все равно в IE6

ZoNT · March 21, 2008

вс? делается в сто раз проще:

делаем левому диву позишн=абсолют и убираем у него флоэт

BAV · March 21, 2008

А теперь добавим футер, а в правом блоке у нас случай с одним предложением, и получится что левый див заезжает на футер(((((

ZoNT · March 21, 2008

песец, так поставь ему top = высоте футера...

ZoNT · March 21, 2008

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

maddogrts · March 24, 2008

вы не правы предложненный вариант работает везде

Sign In

Верстка на div в две колонки, в правой div с clear:both

Question

BAV

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

BAV

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

BAV

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

BAV

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information