Передо мной встала большая проблема... даже гугл меня не спас, и тогда я решил обратиться к вам =)
В моём шаблоне под CMS используются несколько колонок и всё бы ничего, если бы эти колонки не имели тройной фон (верх низ no-repeat и середина repeat-y)
И вот сама проблема: никак не могу добиться, чтобы при набивании любой из колонок большим текстом или любым другим наполнением остальные растягивались до такой же высоты, то есть до подвала...
<div id="all">
<div id="header"></div>
<div id="leftst"> <div id="leftst2"> <div id="leftst3"> leftst</div> </div> </div>
<div id="content"> <div id="content2"> <div id="content3"> content</div> </div> </div>
<div id="centerst"> <div id="centerst2"> <div id="centerst3"> centerst</div> </div> </div>
<div id="right"> <div id="right2"> <div id="right3"> right</div> </div> </div>
<div id="rightst"> <div id="rightst2"> <div id="rightst3"> rightst</div> </div> </div>
<div id="bottom">bottom</div>
<div style="clear:both;"></div>
</div>
[CSS]#all {
margin-left:auto;
margin-right:auto;
width: 1024px;
height: 100%;
background-color:#ddd;
}
#header {
width: 1024px;
height: 196px;
background-color:#adc000;
background: #FFCC66 url("header.jpg") no-repeat;
}
#bottom {
width: 1024px;
height: 84px;
background: #000cad url("Untitled-4.jpg") no-repeat;
margin-bottom:0px;
float:left;
clear:both;
}
div#leftst {
float:left;
background: #000 url(Untitled-4_21.jpg) repeat-y;
margin: auto;
width: 112px;
}
div#leftst2 {
background: url(Untitled-4_31.jpg) no-repeat bottom;
margin: auto;
width: 112px;
}
div#leftst3 {
min-height: 500px;
background: url(Untitled-4_01.jpg) no-repeat top;
margin: auto;
width: 112px;
height: auto;
}
div#content {
float:left;
background: url(Untitled-4_12.jpg) repeat-y;
margin: auto;
width: 500px;
}
div#content2 {
background: url(Untitled-4_22.jpg) no-repeat bottom;
margin: auto;
width: 500px;
}
div#content3 {
min-height: 500px;
background: url(Untitled-4_02.jpg) no-repeat top;
margin: auto;
width: 500px;
}
div#centerst {
float:left;
background: url(Untitled-4_23.jpg) repeat-y;
margin: auto;
width: 68px;
}
div#centerst2 {
background: url(Untitled-4_33.jpg) no-repeat bottom;
margin: auto;
width: 68px;
}
div#centerst3 {
min-height: 500px;
background: url(Untitled-4_03.jpg) no-repeat top;
margin: auto;
width: 68px;
max-height:auto;
}
div#right {
float:left;
background: url(Untitled-4_24.jpg) repeat-y;
margin: auto;
width: 267px;
}
div#right2 {
background: url(Untitled-4_34.jpg) no-repeat bottom;
margin: auto;
width: 267px;
}
div#right3 {
min-height: 500px;
background: url(Untitled-4_04.jpg) no-repeat top;
margin: auto;
width: 267px;
}
div#rightst {
float:left;
background: url(Untitled-4_25.jpg) repeat-y;
margin: auto;
width: 77px;
}
div#rightst2 {
background: url(Untitled-4_35.jpg) no-repeat bottom;
margin: auto;
width: 77px;
}
div#rightst3 {
min-height: 500px;
background: url(Untitled-4_05.jpg) no-repeat top;
margin: auto;
width: 77px;
}[/CSS]
Буду премного благодарен, если поможете мне такому глупому)) ведь я уверен, что выход проще некуда))
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|
Сообщение сайта
Растягивание тройного div'a
GoD_hb
0 
4.1.2011, 6:18;
Сообщений: 1
