Help with Sticky Footer

18th December 06, 09:28 PM

I'm working on a layout that has a footer stuck to the bottom of the page and am having some problems. I've simplified the layout and removed most of the graphics to help the troubleshooting process. I'll include 2 code files in the subsequent posts. The first one works ok...the problem is, due to some complex background graphic layering I need to remove the #masthead DIV out of the #inner-wrap div. The problem is that the footer then gets pushed way down the page. This must have something to do with the negative margin style in the #footer DIV or the #primary-content DIV but I've had no luck pinpointing the issue. This seems to be very close to working. I'd really appreciate another look. Thanks a lot.

18th December 06, 09:29 PM

The Basically Working Footer Version:
(If I remove border-top on #footer, the height on the 3 #corner divs, the margin on #inner-wrap, and the margin-top on #container-page...the footer works perfect. My math is probably off on the #footer DIV a bit.)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">     

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	
	<head>

		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
		/* 09: General
		--------------------------------------------------------------------*/
		* { 
			margin: 0; padding: 0;
		}
		
		html, body, #container-page {
			height: 100%;
			margin: 0;
			padding: 0 2em;
		}
		
		body {
			font-size: small;
			line-height: 1.6em;
			font-family: "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
			background: purple;
		}
		
		/* 09: Container and Column Wrap
		--------------------------------------------------------------------*/
		#container-page {
			margin: 0 auto;
			padding: 0;
			min-width: 50em;
			max-width: 60em;
			margin-top: 20px; 
		}
		
		/* Fixed Width for IE 6 */
		* html #container-page {
			width: 760px;
		}
		
		#inner-wrap { 
			position: relative;
			min-height: 100%;
			margin: 0 0 1.25em 0;
			background-color: #F7F4ED;
		}
		
		/* 	HACK: IE 6 doesn't understand min-height */
		* html #inner-wrap {
			height: 100%;
		}
		
		/* 04: Rounded Corners
		--------------------------------------------------------------------*/
		#corner-left {
			background: blue; 
			margin: 0; padding: 0; 
			height: 10px;
		}
		
		#corner-middle {
			width: 90%;
			height: 10px; 
			margin: 0 auto; padding: 0; 
			background: blue;
			text-align: center;
		}
		
		#corner-right {
			background: blue; 
			margin: 0; padding: 0; 
			height: 10px;
		}
		
		/* 06: Branding
		--------------------------------------------------------------------*/
		#masthead {
			background: green;
		}
		
		#cu-identity {
			position: relative;
			height: 155px;
			background: pink;
		}
		
		/* 07: Image Banner
		--------------------------------------------------------------------*/
		#banner {
			height: 120px;
			background: orange;
		}
		
		/* 07: Main Nav
		--------------------------------------------------------------------*/
		#nav {
			font-size: 75%; 
		}
		
		#menu {
			height: 4em;
			margin: 0; padding: 0;  
			border: 0;
			background: yellow;
		}
		
		#menu dt {
			display: none;
		}
		  
		#menu dd {
			margin: 0; padding: .85em 1.15em; 
			list-style: none; 
			float: left;
			text-transform: uppercase;
			font-weight: bold;
		}
		
		#menu dd, #menu a { 
			display: block; 
			text-decoration: none; 
		}
		
		/* 11: Footer
		--------------------------------------------------------------------*/
		#footer {
			width: 100%;
			position: relative;
			font-size: 75%;
			line-height: 1.6em;
			border-top: 10px solid #E0DFDD;
			background: #A6A5A3;
			padding-top: 10px;
			margin-top: -185px; /* 175px height + 10px top-padding */
			height: 175px;
		}
		
		/* 09: Columns for Primary Content, Secondary Content, and Footer)
		--------------------------------------------------------------------*/
		/* Left Column */
		#primary-content, #footer-info {
			padding: 0 1em;
			margin-right: 28em;
		}
		
		#footer-info {
			height: 175px;
			padding-left: 10em;
		}
		
		/* Middle Column */
		#news-content, #footer-directories {
			width: 12em;
			float: right;
			padding: 0 1em;
		
		}
		
		#footer-directories {
			width: 160px; height: 175px;
		}
		
		/* Right Column */
		#side-content, #footer-tools {
			width: 12em;
			float: right;
			padding: 0 1em;
		}
		
		#footer-tools {
			width: 160px; height: 175px;
		}
		
		#primary-content {
			padding-bottom: 185px; /* must match #footer margin-top */
		}
		</style>
		
	</head>

	<body id="home">
		<div id="container-page">
			
			<!-- rounded corners wrap in -->
			<div id="corner-left"><div id="corner-right"><div id="corner-middle"></div></div></div>
			<!-- rounded corners wrap out-->
			
			<!-- inner wrap in -->
			<div id="inner-wrap">
				
				<!-- masthead in -->
				<div id="masthead">
				
					<div id="cu-identity"></div>
					<div id="banner"></div>
					
					<!-- navigation in -->
					<div id="nav">
						<dl id="menu"> 
							<dt>Navigation:</dt>
							<dd id="home-nav">Home</dd>
							<dd id="abou-nav"><a href="about">Next Page</a></dd>
						</dl>
					</div>
					<!-- navigation out -->
					
				</div>
				<!-- masthead out -->
			
				<!-- content right column in -->
				<div id="side-content">
					<h4>Events</h4>
					<p>very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
				</div>
				<!-- content right column out -->
				
				<!-- content middle column in -->
				<div id="news-content">
					<h4>News</h4>
					<p>long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
				</div>
				<!-- content middle column out -->
				
				<!-- content left column in -->
				<div id="primary-content">
					<h1>Content Here</h1>
					<h2>Sub Heading</h2>
					<p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
                    
                    <div style="clear:both"></div>
                    
				</div>
				<!-- content left column out -->
				
			</div>
			<!-- inner wrap out -->
			
						
						
						
			<!-- footer in -->
			<div id="footer">
				
				<!-- footer right column in -->
				<div id="footer-tools">
					<dl><dt>Tools:</dt></dl>
				</div>
                <!-- footer right column out -->
                
                <!-- footer middle column in -->
                <div id="footer-directories">
					<dl><dt>Directories:</dt></dl>
				</div>
                <!-- footer middle column out -->
                
                <!-- footer left column in -->
				<div id="footer-info"><p>Text</p></div>
                <!-- footer left column out -->
                
			</div>
			<!-- footer out -->
			
		</div>
		
			
			
	</body>
</html>

18th December 06, 09:29 PM

The Pushed Down Footer Version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">     

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	
	<head>

		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
		/* 09: General
		--------------------------------------------------------------------*/
		* { 
			margin: 0; padding: 0;
		}
		
		html, body, #container-page {
			height: 100%;
			margin: 0;
			padding: 0 2em;
		}
		
		body {
			font-size: small;
			line-height: 1.6em;
			font-family: "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
			background: purple;
		}
		
		/* 09: Container and Column Wrap
		--------------------------------------------------------------------*/
		#container-page {
			margin: 0 auto;
			padding: 0;
			min-width: 50em;
			max-width: 60em;
			margin-top: 20px; 
		}
		
		/* Fixed Width for IE 6 */
		* html #container-page {
			width: 760px;
		}
		
		#inner-wrap { 
			position: relative;
			min-height: 100%;
			margin: 0 0 1.25em 0;
			background-color: #F7F4ED;
		}
		
		/* 	HACK: IE 6 doesn't understand min-height */
		* html #inner-wrap {
			height: 100%;
		}
		
		/* 04: Rounded Corners
		--------------------------------------------------------------------*/
		#corner-left {
			background: blue; 
			margin: 0; padding: 0; 
			height: 10px;
		}
		
		#corner-middle {
			width: 90%;
			height: 10px; 
			margin: 0 auto; padding: 0; 
			background: blue;
			text-align: center;
		}
		
		#corner-right {
			background: blue; 
			margin: 0; padding: 0; 
			height: 10px;
		}
		
		/* 06: Branding
		--------------------------------------------------------------------*/
		#masthead {
			background: green;
		}
		
		#cu-identity {
			position: relative;
			height: 155px;
			background: pink;
		}
		
		/* 07: Image Banner
		--------------------------------------------------------------------*/
		#banner {
			height: 120px;
			background: orange;
		}
		
		/* 07: Main Nav
		--------------------------------------------------------------------*/
		#nav {
			font-size: 75%; 
		}
		
		#menu {
			height: 4em;
			margin: 0; padding: 0;  
			border: 0;
			background: yellow;
		}
		
		#menu dt {
			display: none;
		}
		  
		#menu dd {
			margin: 0; padding: .85em 1.15em; 
			list-style: none; 
			float: left;
			text-transform: uppercase;
			font-weight: bold;
		}
		
		#menu dd, #menu a { 
			display: block; 
			text-decoration: none; 
		}
		
		/* 11: Footer
		--------------------------------------------------------------------*/
		#footer {
			width: 100%;
			position: relative;
			font-size: 75%;
			line-height: 1.6em;
			border-top: 10px solid #E0DFDD;
			background: #A6A5A3;
			padding-top: 10px;
			margin-top: -185px; /* 175px height + 10px top-padding */
			height: 175px;
		}
		
		/* 09: Columns for Primary Content, Secondary Content, and Footer)
		--------------------------------------------------------------------*/
		/* Left Column */
		#primary-content, #footer-info {
			padding: 0 1em;
			margin-right: 28em;
		}
		
		#footer-info {
			height: 175px;
			padding-left: 10em;
		}
		
		/* Middle Column */
		#news-content, #footer-directories {
			width: 12em;
			float: right;
			padding: 0 1em;
		
		}
		
		#footer-directories {
			width: 160px; height: 175px;
		}
		
		/* Right Column */
		#side-content, #footer-tools {
			width: 12em;
			float: right;
			padding: 0 1em;
		}
		
		#footer-tools {
			width: 160px; height: 175px;
		}
		
		#primary-content {
			padding-bottom: 185px; /* must match #footer margin-top */
		}
		</style>
		
	</head>

	<body id="home">
		<div id="container-page">
			
			<!-- rounded corners wrap in -->
			<div id="corner-left"><div id="corner-right"><div id="corner-middle"></div></div></div>
			<!-- rounded corners wrap out-->
			
			<!-- masthead in -->
			<div id="masthead">
			
				<div id="cu-identity"></div>
				<div id="banner"></div>
				
				<!-- navigation in -->
				<div id="nav">
					<dl id="menu"> 
						<dt>Navigation:</dt>
						<dd id="home-nav">Home</dd>
						<dd id="abou-nav"><a href="about">Next Page</a></dd>
					</dl>
				</div>
				<!-- navigation out -->
				
			</div>
			<!-- masthead out -->
			
			<!-- inner wrap in -->
			<div id="inner-wrap">
			
				<!-- content right column in -->
				<div id="side-content">
					<h4>Events</h4>
					<p>very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
				</div>
				<!-- content right column out -->
				
				<!-- content middle column in -->
				<div id="news-content">
					<h4>News</h4>
					<p>long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
				</div>
				<!-- content middle column out -->
				
				<!-- content left column in -->
				<div id="primary-content">
					<h1>Content Here</h1>
					<h2>Sub Heading</h2>
					<p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
                    
                    <div style="clear:both"></div>
                    
				</div>
				<!-- content left column out -->
				
			</div>
			<!-- inner wrap out -->
			
						
						
						
			<!-- footer in -->
			<div id="footer">
				
				<!-- footer right column in -->
				<div id="footer-tools">
					<dl><dt>Tools:</dt></dl>
				</div>
                <!-- footer right column out -->
                
                <!-- footer middle column in -->
                <div id="footer-directories">
					<dl><dt>Directories:</dt></dl>
				</div>
                <!-- footer middle column out -->
                
                <!-- footer left column in -->
				<div id="footer-info"><p>Text</p></div>
                <!-- footer left column out -->
                
			</div>
			<!-- footer out -->
			
		</div>
		
			
			
	</body>
</html>

18th December 06, 09:28 PM	#1
wyclef Guest Posts: n/a	Help with Sticky Footer I'm working on a layout that has a footer stuck to the bottom of the page and am having some problems. I've simplified the layout and removed most of the graphics to help the troubleshooting process. I'll include 2 code files in the subsequent posts. The first one works ok...the problem is, due to some complex background graphic layering I need to remove the #masthead DIV out of the #inner-wrap div. The problem is that the footer then gets pushed way down the page. This must have something to do with the negative margin style in the #footer DIV or the #primary-content DIV but I've had no luck pinpointing the issue. This seems to be very close to working. I'd really appreciate another look. Thanks a lot.

Thread Tools
Show Printable Version Email this Page Mark this thread as unsolved
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Footer Problem	sharingsunshine	HTML & XHTML	6	6th July 07 07:25 PM
Weird Footer Problem in Firefox	nma214	Browser Compatibility	0	8th June 07 02:30 PM
IE6 centering issue with nested footer	timgrayphoto	CSS	1	10th November 06 05:50 PM
Footer Problem in FF and IE	Bydgoszcz	Browser Compatibility	4	5th September 06 03:22 PM
footer bug in IE (FF is fine)	Jen	Browser Compatibility	2	14th August 06 06:28 PM