Возможно вопрос нубский, но
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 действуют внутри блока. Вынести наружу у меня как-то не получилось (
Огромная просьба, подскажите, как решить эту проблему! Заранее спасибо!