Проблема с резиновой версткой дивами.

[artist_id]

Добрый вечер. Стоит задача: резиновая div`ная верстка трехколоночного макета с фиксированной центральной колонкой и резиновыми боковыми. Боковые колонки равны. Для Mozilla реализовать удалось. В ие6 все разъезжается.

вот css:

.main_header{

display: table;

height: 227px;

width: 100%;

background: url(image/head_vert_background.jpg) repeat-x;

}

.head_left, .head_right{

position: relative;

display: table-cell;

height: 227px;

width: 100%;

}

.head_left{

float: left;

}

.head_right{

float: right;

}

.header{

display: table-cell;

width: 1000px;

height: 227px;

/*margin: 0 auto;*/

}

html:

<div class = "main_header">

<div class = "head_left"></div>

<div class = "header"></div>

<div class = "head_right"></div>

</div>

Вопрос: можно ли средствами css и html на div`ах реализовать такую верстку или все-таки придется использовать js для получения значений ширины для head_left и head_right?

[mario]

для левой и правой колонки может поставить min и max width?

И по идеи должны будут тянуться одинаково...

[Spamol]

На первый взгляд выглядит правильно и технично, но надо поковырять самому.... хотя IE 6.0 вообще капризный( В IE 7.0 все ровно отображаеться?

[artist_id]

На первый взгляд выглядит правильно и технично, но надо поковырять самому.... хотя IE 6.0 вообще капризный( В IE 7.0 все ровно отображаеться?

В I.E. 7 отображается так же как и в i.e 6. Бразер растягивает боковые дивы во весь экран.

Дело в том, что я сделал, чтобы все работало на таблицах.

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

На таблицах это выглядит так:

HTML:

	
<table class = "tb1" cellspacing = "0" cellpadding = "0">
   <tr class = "header">
	  <td class = "head_left"></td>
	  <td>
			 <div class = "head_container"></div>
	  </td>
	  <td class = "head_right"></td>

CSS:

.head_left, .head_right {style.css (line 57)
  height:100%;
  width:50%;
}
.head_container{
  width: 1000px;
  height: 227px;
}

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

Пока ситуация такова, что на дивах работает везде, кроме i.e. 7 и i.e. 6.

Буду ковырять дольше, о результатах отпишусь.

Пока ситуация такова, что на дивах работает везде, кроме i.e. 7 и i.e. 6.

Edited February 6, 2009 by artist_id

[Spamol]

Тут все подробно разобранно и именно то что тебе нужно.... Реализация достаточно запутанная, потому рекомендую использовать тебе табличную верстку, тем более ты её сделал!