Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" title="currentStyle">
html, body{
color: #000;
background: #fff;
margin: 0px auto;
height:100%;
}
#container{
position:absolute;
top:0px;
left:17px;
width:747px;
height:100%;
background-color:#fff;
}
#topBanner{
position:absolute;
top:0;
left:0;
width:747px;
height:103px;
background-color:transparent;
}
#logo{
position:relative;
top:0px;
left:610px;
width:112px;
height:40px;
}
#columnOne{
position:relative;
width: 186px;
height:100%;
float: left;
top: 117px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#footer{
position:absolute;
background-color:#ADB3BF;
bottom: 0px;
left: 17px;
width:747px;
height: 20px;
vertical-align:middle;
text-align:right;
z-index:100;
}
#footer a{
font:10px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#726AFF;
margin-right:10px;
}
#footer a:hover{
font:10px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#FF6633;
margin-right:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="topBanner" style="background: transparent url(images/collageTop.jpg) no-repeat;">
<div id="logo"><img src="images/logoLabel.gif"></div>
</div>
<div id="columnOne">
how do I stretch this div all the way to the bottom so that the border on the right here connects with the footer? Works fine in IE but extends beyond page in mozilla and Opera 7</div>
</div>
<div id="footer"><a href="#">copyright notice</a></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simmo's CSS Page Template - Three Column Pixel Perfect - Header & Footer</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
margin: 0;
padding:0;
background:#ffffff;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#leftnav{
position:absolute;
top:62px;
left:0;
width:140px;
z-index:3;
background:#ffffff;}
#rightnav{
position:absolute;
top:62px;
right:0;
width:140px;
z-index:2;
background:#ffffff;}
#containmentblock {
width:100%;
z-index:1;
background:#ffffff;
height:80%;}
#header{
height:60px;
border-bottom:1px solid #408080;
width:100%;
background:#C1C1FF;
margin:0;
}
#content{
margin:0 142px 0 142px;
position:relative;
background:#ffffff;
z-index:5;
border: solid #408080;
border-width:0 1px;
}
#footer {
width:100%;
height:35px;
border: solid #408080;
border-width:1px 0;
background:#C1C1FF;
color: #000000;
margin:0;
}
</style>
</head>
<body>
<!-- header div -->
<div id="header"><h1>Header Content Here</h1></div>
<!-- center column -->
<div id="containmentblock">
<div id="content">
<h3 align="center">Three Column Pixel Perfect with Header &
Footer - MK 1</h3>
In this example the table will stretch to the browser dimensions and the content
will be read first,
<p>The left and right columns are positioned absolutley. And now we have a
header and footer. One problem we first have to overcome is that it's impossible
to get the left and right columns to always match the height of the content
column. If the L&R columns are too short we see the page background
and quite simply it looks awful. If the L&R columns are too long they
overlap the page footer.</p>
<p>To overcome the first problem we enclose the main content div in an outer
div. This unfortunatly has to be the same colour as the L&R columns
which must be the same colour as each other.</p>
<p>The overlap? All I think we can do is to stack the footer higher than the
L&R columns and risk losing content but if you place the footer at the
end of the longest column then it will always display last.</p>
<p>One good thing about this method is that we can set the margins of the
center content div much larger than the width of the left and right columns
and therefore should not need to worry about IE5x PC's stupidity. And it
still gives the appearance of being pixel perfect.</p>
<p>Note also, no need for the box hack as we have built some flexibility into
the template! IMO. Does this hold true in your browser? Please let me know.</p>
<p>Also, one potential problem. If you set position:relative for the #c-block
it completely hides the left and right columns. So just leave it out? In
IE6 yes or else nest ALL the blocks within this div, including the header
div.</p>
</div>
</div>
<!-- end of center column --></div>
<!-- end c-block -->
<div id="footer" align="center"><h4>Footer Div - Copyright Information</h4>
</div>
<!-- left column -->
<div id="leftnav"><br />
<h4 align="center">Left Column</h4>
<p align="center">The left navigation column can be used for navigation links,
search box just about anything that you wish to place in here.</p>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rightnav"><br />
<h4 align="center">Right Column</h4> <p align="center">More links?</p>
<p align="center"><br />
Advertisements?</p>
<p align="center">plus any other ideas that you may have as this can also be
used for any thing that you wish to place here!</p>
</div>
<!-- end of right column -->
</body>
</html>
This doesnt solve it for me since the borders then run in to and over the image I have at the top.
Will I be forced to resort to tables :-(
Also, here's a page that explains it in easy to understand terms:
CSS box model (in layman's terms) [tanfa.co.uk]
