1 reply [Last post]
tegansnyder
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2008-11-11
Posts: 2
Points: 0

I'm in search for a layout. I can't seem to find any 3 column layouts that are all fixed width and 100% height.

I want also would like a header and a sticky footer.

Does anybody have anything like this?

Thanks,
Tegan

tegansnyder
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2008-11-11
Posts: 2
Points: 0

Ok here is what I got so far...

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo three columns</title>
<script type="text/javascript">
	function fillthescreen(){
		winH = windowHeight(); //This returns the screen heigth
		heightNeeded=winH-40; //We need to substract the footer height
		if( typeof( window.innerWidth ) != 'number' ) { //Explorer doesn't recognize minHeight
			document.getElementById('col1').style.height=heightNeeded+'px'; //So, we use height (and explroer bug)
		}
		document.getElementById('col1').style.minHeight=heightNeeded+'px'; //For every other browser, we use minHeight
	}
 
	function windowHeight(){
		var alto= 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			alto= window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			alto= document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			alto= document.body.clientHeight;
		}
		return alto;
	}
</script>
<style type="text/css">
html, body {
	height: 100%;
	margin:0 auto;
}
 
#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%; /* the bottom margin is the negative value of the footer's height */
	width: 1280px;
	margin-top: 0;
	margin-bottom: -195px;
	position: relative;
}
#footer {
	height: 195px; /* .push must be the same height as .footer */
	background-color:pink;
	width: 1280px;
	z-index: 999;
	position: absolute;
}
#push {
	height: 195px; /* .push must be the same height as .footer */
}
 
#container{
	min-height: 100%;
	height: auto !important;
	height: 100%; /* the bottom margin is the negative value of the footer's height */
	width: 1280px;
	left:0px;
	top:217px;
	position:absolute;
	margin-top: 0;	
}
 
#header {
	height: 217px;
	 background-color:black;
	 color:white;
}
 
#left{
	position:absolute;
	left:0px;
	top:0px;
	background-color:red;
	width:300px;
	height: 100%;
	float:left;
 }
#center{
	position:absolute;
	left:300px;
	top:0px;
	background-color:blue;
	width:545px;
	height: 100%;
	float:left;
 }
#right{
	position:absolute;
	left:845px;
	top:0px;
	background-color:yellow;
	width:435px;
	height: 100%;
	float:left;
 }
 
 
</style>
</head>
 
<body onload="fillthescreen()">
 
<div id="wrapper">
<div id="header">header</div>
 
	<div id="container">
		<div id="left">
			first column<br />-<br />-<br />-<br />-<br />-<br />-<br />-<br />-<br />-
		</div>
		<div id="center">
			second column<br />-<br />-<br />-<br />-<br />-<br />-<br />-<br />-<br />-
		</div>
		<div id="right">
			third column<br />-<br />-<br />-<br />-<br />-<br />-<br />-<br />-<br />-
		</div>
	</div>
    <div id="push"></div>
</div>
	 <div id="footer">footer<br /><br />-<br />-<br /><br />-</div>
</body>
</html>

I the three middle columns are expanding over the page height. Any ideas?