homepage Welcome to WebmasterWorld Guest from 54.205.52.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Page Layout
3 columns no tables
graywolf




msg:1175033
 4:53 am on Feb 14, 2003 (gmt 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?

 

ryan26




msg:1175034
 2:28 pm on Feb 17, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved