Верстка DIVами. Смешивание фиксированной и резиновой ширины.

[Mei]

Возможно вопрос нубский, но Google конкретно по этому поводу ничего не подсказал.

При создании шаблона возникла проблема: для дизайна шапки сделал ее в шесть дивов, один из них, где-то посередине, должен заполнять все свободное пространство для "резиновости" шаблона в целом. Но он ни в какую не хочет этого делать!  

Код шапки php

Код

<div id="main">
   <div id="left-bg">1</div>
       <div id="header">
  	   <div id="logo"><a href="index.php"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/_logo.gif" alt=""></a></div>
                 <div id="center-bg">|________resize center______|</div>
                     <div id="right-bg">1</div>
                          <div id="search">
                               <div class="module-search">
				     <jdoc:include type="modules" name="user4" /></div>
                               </div>    
                           <div id="map">|____map_____|</div> 	
    </div>
</div>
 

Код CSS для этих элементов

Код

#main {
	text-align:center;
	width:100%;
	height:60px;
}
 
#header{
	text-align:center;
	width:auto;
	height:60px;
	overflow:hidden;
 
}
 
#left-bg {
	float:left;
	width:25px;
	height:60px;
	background:url(../images/_leftup-bg.gif);
	background-repeat:no-repeat;
}
 
#logo {
	float:left;
	width:50px;
	height:60px;
	vertical-align:middle;	
	background:url(../images/_box3-bg.gif);
	background-repeat:repeat-x;
}
 
 
#center-bg {
	float:left;
	width:auto;
	height:60px;
	background:url(../images/_box3-bg.gif);
	background-repeat:repeat-x;
}
 
#search {
	float:right;
	width:250px;
	height:60px;
	background:url(../images/_box3-bg.gif);
	background-repeat:repeat-x;
}
 
#map {
	float:right;
	width:150px;
	height:60px;
	background:url(../images/_box3-bg.gif);
	background-repeat:repeat-x;
}
 
 
#right-bg {
	float:right;
	width:25px;
	height:60px;
	background:url(../images/_rightup-bg.gif);
	background-repeat:no-repeat;
}
 

Именно id="center-bg" и не даёт покоя. width 100% дает растяжку на всё пространство окна, margin-left и margin-right действуют внутри блока. Вынести наружу у меня как-то не получилось (

Огромная просьба, подскажите, как решить эту проблему! Заранее спасибо!

[Russfox]

покажи картинку - чего в итоге получить хочешь. тут я думаю по другому divы расположить надо.
Что то вроде того:
  <div id="header">
     <div id="left-bg">
     <div id="right-bg">
   
     </div>
   </div>
  </div>
если делаешь резиновую верстку - то #left-bg и #right-bg наверно лучше в процентах указать
логотип в div не надо оборачивать, что мешает написать  <a id="logo" ... >
search и map в один div, сделать его абсолютным и выровнять по правому краю

[Mei]

Вот нечто такое получалось. banner - это уже следующий div.




Сейчас попробую предложенный вариант.

[Mei]

Russfox, спасибо! Особенно за предложение с логотипом) Жаль, что карму поставить не могу (