Jump to content

[SOLVED] 3 column layout with sticky footer (space above footer in FF, Opera, Safari)


sKunKbad

Recommended Posts

I'm working on a template. It's a 3 column layout (Fixed-Fluid-Fixed), and has been set to a max width and centered. I've also implemented a sticky footer, but it only renders correctly in IE6 and IE7. Firefox and Opera display a gap above the footer, and Safari has odd behavior when resizing the window (sometimes a gap, sometimes no gap). Obviously there is some sort of CSS issue here, but I'm not quite sure what is going on.

 

Perhaps a set of fresh eyes can catch the bug/mistake I made:

 

<!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>
<title>Sticky Fingers</title>
<script type="text/javascript" src="minmax.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/2.5.0/build/reset-fonts/reset-fonts.css" />
<style type="text/css">
	html, body {height: 100%;}
	#ie6_fix { height:100%; }
	#wrapper { max-width:900px; height: auto; min-height: 100%; margin: 0 auto -57px; }
	* html #wrapper{height:100%;}
	#header { background-color:orange; width:100%; height:75px; }
	#left { float:left; width:200px; background-color:pink; }
	#right { float:right; width:200px; background-color:pink; }
	#center { margin-right:215px; margin-left:215px; background-color:yellow; }
	#push{float:left; clear:both; height: 57px;}
	#footer { clear:both; background-color:orange; height:57px; max-width:900px; margin: 0 auto;}
</style>
</head>
<body>
<div id="ie6_fix">
	<div id="wrapper">
		<div id="header">
			<h1>3 Columns - 3 Divs</h1>
		</div>
		<div id="left">
			<p><b>Left Column: <em>200px</em></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
		</div>
		<div id="right">
			<p><b>Right Column: <em>200px</em></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
		</div>
		<div id="center">
			<p><b>Content Column: <em>Fluid</em></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium suscipit purus. Pellentesque pulvinar purus eget sem. Proin est mi, consectetur at, mattis in, dictum ac, erat. Proin tempor condimentum eros. Nam neque ante, malesuada sed, tempus vel, fringilla ut, metus. Cras sollicitudin. Morbi placerat bibendum tortor. In blandit. Donec consectetur sodales metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
		</div>
		<div id="push"></div>
	</div>
	<div id="footer"><a href="#">Back to the article</a></div>
</div>
</body>
</html>

 

The javascript is only to make IE6 to behave for max-width, so it shouldn't be an issue, and I haven't included it here, especially since the problem isn't an IE problem.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.