...

View Full Version : streching side columns to the bottom of the page



whitepython
01-16-2010, 12:18 AM
hello

first of all im new to css, i have always done table layouts, untill now, im trying to learn to do them on css, and this is my frist attempt:

im trying to do a 3 colum layout where the left and right colum streches as much as the central colum, the central colum that has all the data

i want to do a image repetition on the side colums that blends in with the background, im not putting any kind of text on them, but, they doesnt seem to strech even if set the height to 100%

if i leave it at 100% and i input a long text, the sides colum streching stops and leaves the text alone

this is my css:



html, body{
height:100%;
margin:0;
padding:0;
}
#main960container
{
border: 10px solid #FF00FF;
width:960px;
margin:auto;
height:100%

}
.header {
background: yellow;
width:800px;
}
.l_container
{
width:70px;
background-color:#FF0000;
height:100%;
float:left;

}
.r_container
{
width:70px;
background:#0000FF;
height:100%;
float:left;

}
.container{
width:800px;
float:left;
}
.footer {
width:800px;
background: #A2A2A2;
margin:auto;
}
</style>
<head>


and this is my html:


<div id="main960container">
<div class="l_container">side A</div>
<div class="container">
<div class="header">HEADER</div>
<p>

long text goeshere
</p>
<div class="footer"> FOOTER </div>
</div>
<div class="r_container">SIDE B</div>

</div>

thanks for your help

Excavator
01-16-2010, 07:04 AM
Hello whitepython,
See if this layout will work better for you - http://nopeople.com/CSS/3-column/index.html

If not, there are plenty of equal height 3 column layouts (http://www.google.com/search?hl=en&rls=com.microsoft%3Aen-us%3AIE-SearchBox&q=equal+height+3+column+layouts&aq=f&oq=&aqi=) available.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum