Page Layout

3 columns no tables

[graywolf]

I am trying to layout a 3 column page, 2 small columns on each side and one large center column. Each of the two side columns has a border on the side touching the center column. Along the bottom is horizontal border that runs the full width of the page. The two side borders have to touch the horizontal border. Here is the code

<style type="text/css">
#leftcontent {
position: absolute;
padding:5px;
top:100px;
left:10px;
width:200px;
height:80%;
background:#fff;
border-right: 1px solid #ccc;
}
#centercontent {
background:#fff;
margin-top :100px;
margin-left: 199px;
margin-right:199px;
text-align:center;
}
#bottomcontent {
position: absolute;
bottom: 10px;
background:#fff;
text-align:center;
border-top: 1px solid #ccc;
width:100%;
height: 20%;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
height:80%;
padding:5px;
top:100px;
right:10px;
width:200px;
background:#fff;
border-left: 1px solid #ccc;
}
</style>
<div id="leftcontent">
text a<br>
text b<br>
tect c<br>
text d<br>
<br>
<br>
text a<br>
text b<br>
tect c<br>
text d<br>
<br>
</div>
<div id="centercontent">
this is the main content <br>
blah blah blah
</div>
<div id="rightcontent">
text 1<br>
text 2<br>
<br>
<br>
text 1<br>
text 2<br>
</div>
<div id="bottomcontent">
this is the bottom footer <br>
footer text copyright stuff<br>
</div>

My problem is the two side borders stick out on the bottom of the page. Any suggestions on how to fix this?

[ryan26]

Only way to fix that is to give it a height value, and if your center content isn't long enough you will have to display it as such.