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
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