In trying to get my website layout just how I wanted it with pure CSS I searched, and searched trying to figure out how to get fixed footers/headers with 3 colums as well.
Suffice it to say - there isn't a whole lot out there. I found many references to the "Holy Grail" of CSS layouts. This was a three column layout with a footer that stayed at the bottom of the content or window (if content doesn't fill window).
But I finally have what I needed, and I thought I'd share it with everyone - so anyone can use it.
Here is the html code:
And here are the two css files:
st.css
ie.css
Enjoy!
Suffice it to say - there isn't a whole lot out there. I found many references to the "Holy Grail" of CSS layouts. This was a three column layout with a footer that stayed at the bottom of the content or window (if content doesn't fill window).
But I finally have what I needed, and I thought I'd share it with everyone - so anyone can use it.
Here is the html code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">@import "st.css";</style>
<!--[if IE]>
<style type="text/css">@import "ie.css";</style>
<![endif]-->
</head>
<body>
<div id="cont">
<div id="content">
<p>Main page content goes here... ONLY this section will scroll when there is more content than can fit vertically.<br><br>Works with IE6SP2, FireFox, Opera, and Netscape (7.2 - should Gecko!)<br><br>May work with others - but has not yet been tested.</p>
</div>
<div id="lnav">
Left Nav
</div>
<div id="rnav">
Right Nav
</div>
</div>
<div id="head">
Heading text...
</div>
<div id="footer">
Footer text...
</div>
</body>
</html>And here are the two css files:
st.css
Code:
html {
overflow:hidden;
}
body {
margin:0;
padding:0;
background:#000;
height:100%;
}
#head {
margin:0;
background:#CCC;
height:25px;
}
#lnav {
position: absolute;
top: 25px;
bottom: 50px;
left: 0px;
width: 30px;
background: #CFC;
}
#rnav {
position: absolute;
text-align: center;
top: 25px;
bottom: 50px;
right: 0px;
width: 155px;
background: #FCF;
}
#rnav p {
margin-top: 5px;
margin-bottom: 5px;
}
#content {
position: absolute;
top: 25px;
bottom: 50px;
left: 30px;
right: 155px;
background: #D5D;
color: #000;
overflow: auto;
}
#content p {
margin: 5px;
}
#footer {
position: absolute;
height: 50px;
width: 100%;
left: 0px;
bottom: 0px;
background: #5D5;
}ie.css
Code:
#content {
height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-
parseInt(this.currentStyle.bottom,10)+'px');
width: expression(document.body.clientWidth-parseInt(this.currentStyle.left,10)-
parseInt(this.currentStyle.right,10)+'px');
overflow-x:hidden;
}
#loc {
width: 100%;
}
#lnav {
height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-
parseInt(this.currentStyle.bottom,10)+'px');
}
#rnav {
height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)-
parseInt(this.currentStyle.bottom,10)+'px');
}Enjoy!
