Page is a not externally linkable
Paul_o_b - 8:28 pm on Jun 26, 2011 (gmt 0)
Hi,
Sorry for the delay in replying - been away all weekend.
Unfortunately you can't have space at the top and the bottom and still have a sticky footer approach using tables because 100% height is from top to bottom - no more no less. You can't stop it short unless you used something like 90% instead but that would mean you could never get it exact although it may be good enough in some cases.
You can do it without using tables but again its only an illusion as 100% always goes from top to bottom. What you can do is rub the top and the bottom out using the background of some inner elements to create the illusion of space around the layout. The drawback would be if you had repeating graphics on the body rather than a solid body colour and then you would get a mismatch.
Here is an example although we are starting to get too clever now and once you overstep the mark then its probably time to re-think the design.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only - use a proper reset in production*/
margin:0;
padding:0
}
h1, h2, p {
margin:.5em 0;
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
body {
background:#fff;
color:#000;
font-size: 100%;
line-height: 1.3;
text-align:center;
}
body:before {/* Opera Fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
#outer {
min-height:100%;
clear:both;
padding:1px 0;
background: rgb(255,222,239);
margin:-90px auto 0;/*footer height + extra to make space at bottom of layout - this drags the outer up through the top of the monitor */
width: 60%;
min-width:600px;
max-width:1200px;
border: 1px solid rgb(153,0,51);
border-bottom:0;
border-top:0;
text-align: left;
}
* html #outer {
height:100%
}
#header {
background:#fff;/* rub border out*/
padding:120px 0 0; /* soak up negative margin and allows header to start at top of page*/
margin:0 -1px;/* rub border out*/
position:relative;
zoom:1.0;
}
#header h1 {
margin:0 30px;
border-bottom: 1px solid rgb(153,0,51);
}
#header .inner {
border: 1px solid rgb(153,0,51);
border-bottom:none;
background: rgb(255,222,239);
padding:1px 0;
}
#footer {/* footer now sits at bottom of window*/
width:60%;
background: rgb(255,222,239);
margin:auto;
height:60px;/* must be a fixed height unfortunately */
clear:both;
min-width:600px;
max-width:1200px;
border: 1px solid rgb(153,0,51);
border-top:none;
text-align: left;
padding:1px 0;
}
#footer .inner {
margin:0 30px;
border-top: 1px solid rgb(153,0,51);
}
#sidebar {
float:left;
width:170px;
border-right: 1px solid rgb(153,0,51);
margin:0 0 0 30px;
display:inline;
padding:1px 0;
}
#main {
overflow:hidden;
zoom:1.0;
border-left:1px solid rgb(153,0,51);
position:relative;
left:-1px;
padding:1px 10px;
}
* html #main {
left:-4px
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<div class="inner">
<h1>Header</h1>
</div>
</div>
<div id="sidebar">
<p>side column</p>
<p>side column</p>
<p>side column</p>
<p>side column</p>
</div>
<div id="main">
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
</div>
</div>
<div id="footer">
<div class="inner">
<p>Sticky Footer</p>
</div>
</div>
</body>
</html>
The above should work most everywhere but relies on things being in the right place at the right time and with the right dimensions. It will be difficult for you to change unless you can understand the concept and how it works which is why I am reluctant to share it.
You should probably ask yourself at this stage "Do I really want a sticky footer or would a basic normal layout suffice?" :)