[sandra175]

Всем привет. Вот, верстаю кое-что... Смысл такой:
Блок #mainimg фисированной высоты и ширины, должен прилипать к верху и быть в центре экрана.
Блоки #left_gr и #right_gr, соответственно, встают по бокам и растягиваются до краев экрана.
Блок #content - растягивается на всю ширину и высоту (100% минус шапка минус футер), но в высоту необязательно, если футер будет сам липнуть к низу.
Блок #footer - должен прилипать к низу вне зависимости от количества контента в блоке #content.

Пишу:

 <div id="head">
  <div id="left_gr"></div>
  <div id="mainimg" align=center>[img]images/v_02.jpg[/img]</div>
  <div id="right_gr"></div>
 </div>
#left_gr
{
 background: no-repeat url('images/v_01.jpg') right #9DE274;
 height: 309px;
 width: 100%;
 display:inline;
 border: 1px solid black;
 position:relative;
 top: 0px;
 left: 0px;
}
#right_gr
{
 background: no-repeat url('images/v_03.jpg') left #1E3F98;
 height: 309px;
 width: 100%;
 border: 1px solid black;
 display:inline;
 position:relative;
 top: 0px;
 right: 0px;
}
#mainimg
{
 width:817px; 
 height: 309px;
 display:inline;
 border: 1px solid black;
}
#head
{
 height: 309px;
 width:100%;
 padding: 0px;
 margin: 0px;
 border: 1px solid red;
 border-bottom: 3px solid #626263;
 top: 0px;
 left: 0px;
 position: relative;
}

а получается, что #mainimg не по центру, а left_bg и right_bg вообще болтаются по бокам от него где-то внизу, и выглядят маленькими квадратиками, при этом даже выходят за рамки #head.

Как его побороть...?

[КузмичЪ]

PHP код:

#left_gr
{
 background: no-repeat url('images/v_01.jpg') right #9DE274;
height: 309px;
float:left;
border: 1px solid black;
position:relative;
top: 0px;
left: 0px;
}
#right_gr
{
 background: no-repeat url('images/v_03.jpg') left #1E3F98;
height: 309px;
border: 1px solid black;
float:right;
position:relative;
top: 0px;
right: 0px;
}
#mainimg
{
background:#ccc;
width:817px;
height: 309px;
margin:0 auto;
}
#head
{
height: 309px;
width:100%;
padding: 0px;
margin: 0px;
border: 1px solid red;
border-bottom: 3px solid #626263;
top: 0px;
left: 0px;
position: relative;
}

<div id="head">
<div id="right_gr"> </div>
<div id="left_gr"> </div>
<div id="mainimg" align=center>[img]images/v_02.jpg[/img]</div>
</div> 


как-то так..

[sandra175]

как-то так..

ну... в общем-то почти... спасибо, дальше попробую сама косяки поправить... но я еще сюда вернусь!