sKunKbad Posted December 6, 2008 Share Posted December 6, 2008 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. Quote Link to comment https://forums.phpfreaks.com/topic/135735-solved-3-column-layout-with-sticky-footer-space-above-footer-in-ff-opera-safari/ Share on other sites More sharing options...
sKunKbad Posted December 6, 2008 Author Share Posted December 6, 2008 I figured it out just minutes after posting, but it was too late to modify my post. Thanks to anyone that may have started to attempt to help. Quote Link to comment https://forums.phpfreaks.com/topic/135735-solved-3-column-layout-with-sticky-footer-space-above-footer-in-ff-opera-safari/#findComment-707293 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.