Продолжаю вести боевые действия с блочной версткой. В какой то момент она здала позиции и сверсталась часть но потом перешла в активное наступление и сейчас удерживает стратегическую позицию в макете.
Есть страница:
как хотелось бы:
[IMG]http://s42.radikal.ru/i096/0904/a6/75ccff399913t.jpg[/IMG]
и все вроде бы ничего если бы не средний блок.
что я только с ним не делал. Но сделать так чтобы он растягивался на все оставшееся между левым и правым блоком (они строго по 200 пикселей) не могу если я ему задаю минимальные размеры этот редиска сдвигает правый блок на свою высоту (в ие6) выкрутился задав для ие абсолютное позиционирование (учитывая что шапка ровно 151 пиксель всегда)но это совершенно не выход ибо растягивать слой под экран скриптом не дело а как заставить его заполнять оставшееся пространство не могу понять.
Полигон испытаний выглядит довольно страшно.
css:
[PHP]* {
margin:0px;
font-family:"Comic Sans MS", cursive;
font-size:16px;
color:#FFF;
}
img {
border:0px;
}
body {
background-color:#010067;
background-image:url(../img/main_bg.gif);
background-position:top;
background-repeat:repeat-x;
}
#head {
clear:both;
background-image:url(../img/head_bg.gif);
background-position:top;
background-repeat:repeat-x;
min-height:150px;
height:auto !important;
height:155px;
text-align:center;
}
#name{
text-align:right;
position:relative;
right:0px;
top:0px;
text-align:center;
}
#main {
clear:both;
min-height:340px;
height:auto !important;
height:340px;
}
#footer {
clear:both;
background-image:url(../img/foot_bg.gif);
background-position:top;
background-repeat:repeat-x;
min-height:100px;
height:auto !important;
height:100px;
margin-top:2px;
}
#content {
float:left;
background-image:url(../img/splash_bg.gif);
background-position:top;
background-repeat:repeat-x;
min-height:29px;
height:auto !important;
height:29px;
min-width:586px;
width:auto !important;
width:582px;
margin-top:5px;
margin-left:5px;
margin-right:5px;
border-left-color:#036;
border-left-style:solid;
border-left-width:2px;
border-right-color:#036;
border-right-style:solid;
border-right-width:2px;
border-bottom-color:#036;
border-bottom-style:solid;
border-bottom-width:2px;
}
#calendar {
text-align:center;
}
#menu a {
text-decoration:none;
vertical-align:middle;
text-align:center;
margin-left:4px;
width:196px;
}
#menu a:hover {
text-decoration:underline;
}
#menu td {
background-color:#5B72E5;
border-bottom-width:2px;
border-bottom-color:#036;
border-bottom-style:solid;
cursor:pointer;
}
.left {
position:relative;
left:2px;
float:left;
width:200px;
background-image:url(../img/splash_bg.gif);
background-position:top;
background-repeat:repeat-x;
margin-top:5px;
min-height:29px;
height:auto !important;
height:29px;
border-left-color:#036;
border-left-style:solid;
border-left-width:2px;
border-right-color:#036;
border-right-style:solid;
border-right-width:2px;
}
.right {
position:relative !important;
position:absolute;
right:2px;
top:0px !important;
top:155px;
float:right;
width:200px;
clear:right;
background-image:url(../img/splash_bg.gif);
background-position:top;
background-repeat:repeat-x;
margin-top:5px;
min-height:29px;
height:auto !important;
height:29px;
border-left-color:#036;
border-left-style:solid;
border-left-width:2px;
border-right-color:#036;
border-right-style:solid;
border-right-width:2px;
}
#content div {
margin-top:31px;
overflow:auto;
}
.left div {
padding-bottom:31px;
overflow:auto;
background-image:url(../img/splash_bg.gif);
background-position:bottom;
background-repeat:repeat-x;
}
.right div {
padding-bottom:31px;
overflow:auto;
background-image:url(../img/splash_bg.gif);
background-position:bottom;
background-repeat:repeat-x;
}
#polezno
{
background:none;
margin:0px;
clear: both ;
display: none ;
padding:0px;
}
#polezno td{
background-color:#5B72E5;
background:none;
padding:4px;
border-bottom-width:1px;
border-bottom-color:#036;
border-bottom-style:solid;
}
#preload_elements {
display:none;
}
#friends, #dizain {
margin-top:0px;
text-align:center;
}
#friends, #dizain {
background-image:url(../img/splash_bg.gif);
background-position:top;
background-repeat:repeat-x;
}
#change_dizain {
background-color:#5B72E5;
}
#logo {
float:left;
margin:0px;
}
.sub_block {
padding-bottom:31px;
overflow:auto;
background-image:url(../img/splash_bg.gif);
background-position:bottom;
background-repeat:repeat-x;
}[/PHP]
Страничка:

уже сам запутался в коде.