еще немножко про div'ы

[theo_]

Есть родительский блок, в нем располагаюся два дива, у первого из которых ширина фиксированная в px, у второго она должна занимать все остальное пространство. Как такое реализовать с помощью css?

т.е. есть в общем случае такой html-код:

<div id="content">

  <div class="left">
	<ul>
		....
	</ul>
  </div>

  <div class="right">
	...
  </div>

</div>

что нужно задать в css?

#content {
  width: 100%;
  overflow: hidden;
}
.left {
  width: 220px;
}
.right {
  /* Что тут нужно задать? */
}

[VJiK]

Я использую такой вариант:

<div class="l-container">

	<!-- Контент -->
	<div class="l-content-wrap"><div class="l-content">
		Контент
	</div></div>
	<!-- Контент - Конец -->

	<!-- Сайдбар -->
	<div class="l-left">
		Сайдбар
		<div class="g-clear"></div>
	</div>
	<!-- Сайдбар - Конец -->

	<div class="g-clear"></div>
</div>

Стили:

.g-clear { font-size: 0; clear: both; }
.l-content-wrap { float: right; width: 100%; margin-left: -250px; }
.l-content { margin-left: 250px; }
.l-left { float: left; width: 250px; }

[theo_]

VJiK, спасибо большое, сейчас испытаю

а

font-size: 0;

для каких нужд используется?

[mishka]

<div id="content">

  <div class="left">
	<ul>
		....
	</ul>
  </div>

  <div class="right">
	...
  </div>

</div>

#content {
  width: 100%;
  overflow: hidden;
}
.left {
  width: 220px;
  float:left;
}
.right {
  height:1%;
  overflow:hidden;
}

Edited September 2, 2009 by mishka2

[VJiK]

Мне необходимо чтобы слой .g-clear имел нулевую высоту, а ИЕ6 без font-size: 0; не хочет меня слушать

Edited September 2, 2009 by VJiK

[psywalker]

<div id="content">

  <div class="left">
	<ul>
		....
	</ul>
  </div>

  <div class="right">
	...
  </div>

</div>

#content {
  width: 100%;
  overflow: hidden;
}
.left {
  width: 220px;
  float:left;
}
.right {
  height:1%;
  overflow:hidden;
}

1) #content - зачем ему задавать 100% ширину, блочные элементы по умолчанию тянутся на всю ширину своего родителя!

2) height:1%; - вот это совершенно ни к чему, и к тому же может привести к неприятным последствиям, для ИЕ6 Зум:1, как и для #content

[mishka]

100% и 1% для ие6 так как overvlow:hidden; неработает в ие6 без ширины либо высоты. Это неприведет к неприятным последствиям. А зум невалиден.

Но ТС выбор за вами. Можете убрать ширину высоту и поставить зум. Будет работать. Но цсс будет не валиден.

Edited September 2, 2009 by mishka2

[VJiK]

#content {

width: 100%;

overflow: hidden;

}

.left {

width: 220px;

float:left;

}

.right {

height:1%;

overflow:hidden;

}

Но этот код не сработает. Как только контент в .right превысит высоту .left, то контент продолжится под .left, что совсем не нужно

[mishka]

Сработает так как есть оверфлов хидден на .right, попробуйте правда в ие6 и ие7 правый блок будет на 3 пикселя правее от левого по сравнению с другими браузерами. Если дизайн строгий то

* html .left{margin:0 -3px 0 0}

*+html .left{margin:0 -3px 0 0}

но мне кажется что лучше в цсс дополнительно 2 строки чем куча дополнительных дивов которым программер будет далеко не рад

Edited September 2, 2009 by mishka2

[theo_]

в ие6 пока попробовать не могу, но в хороших браузерах все работает прекрасно

еще раз всем спасибо, и отдельно mishka2 за столь хорошее решение!

[mishka]

Да незачто, это уже давно известное решение.

height:1%; может дать сбой если вы #content зададите высоту.

тогда блок станет 1% от родителя. Но редко кто задает высоту контенту. А если и будет такая ситуация то учитывайте это

Edited September 2, 2009 by mishka2

[VJiK]

mishka2, отличное решение. Согласен, что лучше использовать хаки в CSS =)

Поясните поподробнее, почему это работает?

[mishka]

Да вот работает...

[VJiK]

Да я понимаю, что работает... хочется разобраться - почему... что на что влияет

Ладно, порою поиск...

[Searcher]

Дело в том, что плавающие блоки (flot:left или float:right) выпадают из обычного потока, родитель их перестает видеть. А если родительскому резиновому блоку указать overflow: hidden, он будет видеть плавающие блоки и подстраивать размер с учетом расположения и размеров дочерних плавающих блоков.

ну а zoom:1 для родителя добавляется, чтобы ИЕ6 это все понял

Edited September 2, 2009 by Searcher