CSS stretch content to bottom?

Soldato
Joined
18 Oct 2002
Posts
9,047
Location
London
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			*, body, html {margin:0;padding:0}
			
			body {
				background:#cccccc;
			}
			
			
			/* Layouts */
			#container {
				background:#ffffff;
				width:800px;
				margin:0 auto;
				height:100%;
			}
			
			#logobar {
				height:30px;
				border-bottom:1px solid #000;
			}
			
			#content {
				border:1px solid #fff;
			}
			
			
			#footer {
				height:30px;
				border-top:1px solid #000; 
			}
		</style>
	</head>

<body>

	<div id="container">
	
		<div id="logobar">
			asdfsa
		</div>

		
				
		<div id="content">
			sdfsdfsdf<br/>
			sdfsdfsdf<br/>
			sdfsdfsdf<br/>
		</div>

	
		<div id="footer">
			sdfsdf
		</div>

	</div>
	
</body>
</html>


There's the basic code... I'm trying to get the bottom footer bar to stick to the very bottom of the screen and the content to stretch the gap. I found one example on the net, and although it works in firefox, it's a mess in IE7.

I'm hoping it's something simple... thanks for any help :)
 
Ahh now that is better! Thanks :)
I have the footer bar 'stuck' to the bottom now, but the main content doesn't stretch all the way down to it. Annoying!
I'll mess about with this absolute thing, I've never used it before..
 
Ahhh that's fantastic, thank you! :)

The code you posted works perfectly in FF, but not IE7! However, if I remove the following line from the #container:
height:auto !important; /* real browsers */

It works fine in both FF and IE7! :) However I don't have IE6 to test on, so I can't tell if it works for that, but either way at least I know what I require if it doesn't.
Thanks again, I don't mind normal CSS'ing, but this kinda stuff gets quite frustrating at times!
 
Back
Top Bottom