Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

Page Layout

3 columns no tables

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 28, 2002
posts:1324
votes: 0


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?

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

Junior Member

10+ Year Member

joined:Feb 12, 2003
posts:155
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members