Xpoint
   [напомнить пароль]

две колонки и clear:both в контенте

Метки: [без меток]
2008-04-07 15:44:30 [обр] Vladimir Sobolev(2/6)[досье]

Добрый день.
Имеется классический Layout о 2х столбцах, реализованный через float и margin-left:

#left {float:left;width:200px}
#center {margin-left:200px}

<div id="left">Menu</div>
<div id="center">Content</div>
<div id="footer">&copy;</div>

Суть проблемы в том, что при использовании clear:both в блоке #content, clear происходит до высоты контента блока #left, образуя большой разрыв.
Погуглил и решение временно сделал с position:absolute для блока #left, но считаю его не оптимальным и ищу нормального решения без абсолютного позиционирования, т.к. в этом случае при малой высоте #center - #left может заехать на футер.

спустя 25 минут [обр] Денис(0/2)[досье]
попробуйте clear:both; указывать для footer
спустя 4 минуты [обр] Vladimir Sobolev(2/6)[досье]
нет, это не помогает.
спустя 1 минуту [обр] Vladimir Sobolev(2/6)[досье]
вот ссылка на пример, без позиционирования, на нем видно суть проблемы.
http://sobolev.vladimir.ru/media/clear/
спустя 9 минут [обр] vashurin(3/3)[досье]
Внутрь блока с id="center" поставьте еще один блок и пропишите ему float:left;, тогда очистка не будет зависит от блока с id="left"
спустя 2 минуты [обр] Lynn «Кофеман»(56/571)[досье]
Попробуйте так:
#left {
  float: left;
  width: 200px;
  _margin-right: -3px; /* IE6 */
}
#content {
  overflow: hidden;
  _height: 1%; /* IE6 */
}
спустя 32 минуты [обр] Vladimir Sobolev(2/6)[досье]
vashurin[досье] спасибо, работает, как это называется? разделение потоков?
спустя 29 минут [обр] Евгений Петров(172/1055)[досье]
сообщение промодерировано
Это называется 3px gap.
спустя 2 минуты [обр] Vladimir Sobolev(2/6)[досье]
Евгений Петров[досье] про gap я в курсе, а обращался к vashurin[досье]
спустя 29 минут [обр] Евгений Петров(172/1055)[досье]
Vladimir Sobolev[досье]
Ну что Вы придумываете термины, которых нет? То, что Вы описали, есть самый что ни на есть баг IE.
Тут же все описано, что и как должно себя вести при использовании position, float и display.
спустя 29 минут [обр] Vladimir Sobolev(2/6)[досье]
Евгений Петров[досье] ну а каком IE3pxgap может идти речь, если проблема в clear:both и она проявляется и в FF и в IE?
спустя 11 минут [обр] Vladimir Sobolev(2/6)[досье]
Евгений Петров[досье] или он кроссбраузерный :) просто я не понимаю как в моем случае влияет 3px gap в FF.
спустя 2 минуты [обр] Евгений Петров(172/1055)[досье]
Vladimir Sobolev[досье]
Хммм, да, Вы правы. Дело тут не в IE и его баге. Ну я бы сделал так
#left{float:left;width:200px;height:200px;background:#69c;}
#center{float:right;width:100%;margin:0 0 0 -200px;}
#center .in{margin:0 0 0 200px;}
#content{clear:both;height:100px;background:#369;}
...
<div id="center">
  <div class="in">text
    <div id="content"></div>
  </div>
</div>
<div id="left"></div>
спустя 3 минуты [обр] Vladimir Sobolev(2/6)[досье]
Евгений Петров[досье] я сделал <div class="inner left">, где .left стандартный в моих проектах класс с float:left, а то я inner считаю расточительством в коде, а тут еще один блок добавлять :)
Powered by POEM™ Engine Copyright © 2002-2005