Welcome to WebmasterWorld Guest from 23.22.250.113

Forum Moderators: not2easy

Message Too Old, No Replies

Page Layout

3 columns no tables

     

graywolf

4:53 am on Feb 14, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:28 pm on Feb 17, 2003 (gmt 0)

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month