Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    217
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Sticky Footer Problem (CSS/JS)

    Hello,
    Is it just me or are sticky footers positioned bottom tricky? Even once I get 1 technique working for one site, if I use it again for another layout something always runs amuck.
    Anyhow, I've been using a modified JS version of an ALA script I found a while ago. It's been working great for me but it seems as though lately it's been a bit problematic. As one of my previous posts said, I am pretty sure there is nothing wrong with the JS itself and that the problem is in the CSS.

    You'll need Firefox in order to troubleshoot this. I haven't checked anything in another browser yet. The problem is two-fold. First, the footer does not respect the min and max width given which are identical to the #container DIV. They should appear the same in width and the columns in the footer should line up with the columns in #container. Obviously something is skewed. And second, the footer should stop at the bottom of the #container DIV.

    Hopefully a different set of eyes will see what I'm missing here.

    Here is the code.

    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>Footer</title>
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<script type="text/javascript">
    		/*--------------------------------------------------
    			Footer Object
    		--------------------------------------------------*/
    		function getWindowHeight() {
    			var windowHeight = 0;
    			if (typeof(window.innerHeight) == 'number') {
    				windowHeight = window.innerHeight;
    			}
    			else {
    				if (document.documentElement && document.documentElement.clientHeight) {
    					windowHeight = document.documentElement.clientHeight;
    				}
    				else {
    					if (document.body && document.body.clientHeight) {
    						windowHeight = document.body.clientHeight;
    					}
    				}
    			}
    			return windowHeight;
    		}
    		function setFooter(fid) {
    			if (document.getElementById) {
    				var windowHeight = getWindowHeight();
    				if (windowHeight > 0) {
    					var contentHeight = document.getElementById('container').offsetHeight;
    					var footerElement = document.getElementById(fid);
    					var footerHeight  = footerElement.offsetHeight;
    					if (windowHeight - (contentHeight + footerHeight) >= 0) {
    						footerElement.style.position = 'absolute';
    						footerElement.style.top = (windowHeight - footerHeight) + 'px';
    					}
    					else {
    						footerElement.style.position = 'static';
    					}
    				}
    			}
    		}
    		window.onload = function() {
    			setFooter('footer');
    		}
    		window.onresize = function() {
    			setFooter('footer');
    		}
    		</script>
    
    
    
    		<style type="text/css">
    		/* 01: General
    		-----------------------------------------------------------------------------*/
    		/* Remove padding and margin */
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		body {
    			margin: 0; padding: 0 7%;
    			font-family: Palatino, Georgia, serif;
    			color: #333;
    			background: navy;
    		}
    				
    		/* 02: Typography
    		-----------------------------------------------------------------------------*/
    		body {
    		  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
    		}
    		
    		/* 09: Containers
    		-----------------------------------------------------------------------------*/
    		#container {
    			min-width: 680px;
    			max-width: 960px;
    			margin: 0 auto;
    			background: #F7F4ED; 
    		}
    		
    		#container-bottom {
    			min-width: 680px;
    			max-width: 960px;
    			margin: 0 auto;
    		}
    		
    		/* 09: Columns
    		-----------------------------------------------------------------------------*/
    		#columns-wrap { 
    			width: 100%;
    			float: left;
    			background: #F7F4ED;
    		}
    		
    		/* 09: Primary Content 
    		-----------------------------------------------------------------------------*/
    		/* Left Column */
    		#primary-content {
    			float: left;
    			padding: 0 15px;
    			margin: 20px 370px 20px 0;
    			background: #F7F4ED;
    		
    		}
    		
    		/* 10: Secondary Content
    		-----------------------------------------------------------------------------*/
    		/* Middle Column */
    		#news-content {
    			float: left;
    			width: 159px;
    			padding: 0 15px;
    			margin: 20px 0 20px -380px;
    			border-left: 1px solid #E5E5E5;
    			background: #F7F4ED;
    		
    		}
    		
    		/* Right Column */
    		#side-content {
    			float: left;
    			width: 159px;
    			padding: 0 15px;
    			margin: 20px 0 20px -190px;
    			border-left: 1px solid #E5E5E5;
    			background: #F7F4ED;
    		}
    		
    		/* 11: Footer
    		-----------------------------------------------------------------------------*/
    		#footer {
    			background: #A6A5A3;
    			height: 175px;
    			clear: left;
    		}
    		
    		/* Left Column */
    		#footer-info {
    			float: left;
    			padding: 0 15px;
    			margin: 20px 370px 20px 0; 
    		}
    		
    		/* Middle Column */
    		#footer-directories {
    			float: left;
    			width: 159px;
    			padding: 0 15px;
    			margin: 20px 0 20px -380px;
    			border-left: 1px solid #E5E5E5;
    		}
    		
    		/* Right Column */
    		#footer-tools {
    			float: left;
    			width: 159px;
    			padding: 0 15px;
    			margin: 20px 0 20px -190px;
    			border-left: 1px solid #E5E5E5;
    		}
    		</style>
    		
    	</head>
    
    	<body id="home">
    		<div id="container">
    			
    			<!-- columns wrap in -->
    			<div id="columns-wrap">
    			
    				<!-- 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>
    					<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    					<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    				</div>
    				<!-- left column out -->
    				
    				<!-- middle column in -->
    				<div id="news-content">
    					<h4>Headings</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>
    				<!-- middle column out -->
    			
    				<!-- right column in -->
    				<div id="side-content">
    					<h4>Headings</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>
    					<h4>Headings</h4>
    					<p>text filler make text silly filler make filler very silly make text very very text make long filler 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>
    				<!-- right column out -->
    			
    			</div>
    			<!-- columns wrap out -->
    			
    		</div>
    			
    			
    		<div id="container-bottom">	
    			
    		<!-- footer in -->
    		<div id="footer">
    	
    			<div id="footer-info">
    				<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>
    			
    			<div id="footer-directories">
    				<dl>
    					<dt>List:</dt>
    					<dd><a href="">List 1</a></dd>
    					<dd><a href="">List 2</a></dd>
    					<dd><a href="">List 3</a></dd>
    				</dl>
    			</div>
    			
    			<div id="footer-tools">
    				<dl>
    					<dt>List:</dt>
    					<dd><a href="">List 1</a></dd>
    					<dd><a href="">List 2</a></dd>
    					<dd><a href="">List 3</a></dd>
    				</dl>
    			</div>
    			
    		</div>
    		<!-- footer out -->
    		
    		</div>
    			
    			
    	</body>
    </html>
    Thanks!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I'm a little confused. Why are you using javascript for this?
    Check out these examples.
    http://bonrouge.com/3c-hf-fixed.php
    http://bonrouge.com/3c-hf-fixed.php?nc (same layout as first one but without content)
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    217
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Those examples look helpful. I'll look into them. I'm using Javascript because some of my target browsers are older versions of IE like Mac IE 5.2.3 for instance where it would be a nightmare to get CSS Footers to work. I've used this JS method before and never had a problem with it so am not sure what the problem is. I will definitely look into a CSS solution but really would like to know for my own knowledge what I'm doing wrong.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    contentHeight is returning 0. This is because you floated all of the elements in the #container div but you didn't clear them. Adding this to your CSS
    Code:
    		.clear {
    		clear:both;
    		font-size:0;
    		line-height:0px;
    		}
    then adding the parts here in bold should get it working properly again
    Code:
    <div id="container">
    	<!-- columns wrap in -->
    	<div id="columns-wrap">
    		<!-- 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>
    			<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    			<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    		</div>
    		<!-- left column out -->
    		<!-- middle column in -->
    		<div id="news-content">
    			<h4>Headings</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>
    		<!-- middle column out -->
    		<!-- right column in -->
    		<div id="side-content">
    			<h4>Headings</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>
    			<h4>Headings</h4>
    			<p>text filler make text silly filler make filler very silly make text very very text make long filler 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>
    		<!-- right column out -->
    		<div class="clear">&nbsp;</div>
    	</div>
    	<div class="clear">&nbsp;</div>
    	<!-- columns wrap out -->
    </div>
    You should also read http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    217
    Thanks
    6
    Thanked 0 Times in 0 Posts
    That makes perfect sense. But it didn't work. Check this out, I removed the floats, and simplified things down even further. Same problem.

    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>Footer</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<script type="text/javascript">
    			function getWindowHeight() {
    				var windowHeight = 0;
    				if (typeof(window.innerHeight) == 'number') {
    					windowHeight = window.innerHeight;
    				}
    				else {
    					if (document.documentElement && document.documentElement.clientHeight) {
    						windowHeight = document.documentElement.clientHeight;
    					}
    					else {
    						if (document.body && document.body.clientHeight) {
    							windowHeight = document.body.clientHeight;
    						}
    					}
    				}
    				return windowHeight;
    			}
    			function setFooter(fid) {
    				if (document.getElementById) {
    					var windowHeight = getWindowHeight();
    					if (windowHeight > 0) {
    						var contentHeight = document.getElementById('container').offsetHeight;
    						var footerElement = document.getElementById(fid);
    						var footerHeight  = footerElement.offsetHeight;
    						if (windowHeight - (contentHeight + footerHeight) >= 0) {
    							footerElement.style.position = 'absolute';
    							footerElement.style.top = (windowHeight - footerHeight) + 'px';
    						}
    						else {
    							footerElement.style.position = 'static';
    						}
    					}
    				}
    			}
    			window.onload = function() {
    				setFooter('footer');
    			}
    			window.onresize = function() {
    				setFooter('footer');
    			}
    		</script>
    
    		<style type="text/css">
    			body {
    				margin: 0; padding: 0 7%;
    				background: navy;
    			}		
    			#container, #container-bottom {
    				min-width: 680px; 
    				max-width: 960px;
    				margin: 0 auto;
    			}
    			#primary-content {
    				background: yellow;
    			}
    			#footer {
    				background: white;
    			}
    		</style>
    	</head>
    
    	<body id="home">
    		<div id="container">
    			<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>
    				<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    				<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    			</div>
    		</div>
    		<div id="container-bottom">	
    			<div id="footer">
    				<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>
    		</div>
    	</body>
    </html>

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    217
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey, so I've started working on this baed on the examples you provided and it seems to be going fairly well. I've made considerable progress and this thing seems to be working in most modern browsers fine. I am curious if anyone has any ideas about how I could simplify some of the columns CSS. Did I overcomplicate things with all the margin work?

    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>Footer</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    		<style type="text/css">
    			/* Position the Footer Styles  */
    			html { 
    				height:100%; 
    			}
    			body {
    				margin: 0; padding: 0 8%;
    				height: 100%;
    				background: navy;
    			}
    			#container-page {
    				min-height: 100%;
    				min-width: 680px; 
    				max-width: 960px;
    				position: relative;
    				margin: 0 auto;
    				background: #F7F4ED;
    
    			}
    			
    			/* Fixed Width for IE 6, JS Expression too buggy */
    			* html #container-page {
    				width: 760px;
    			}
    			/* 
    			
    			Min and Max Width for IE. Not really working properly.
    			
    			* html #container-page {
    				width: expression(document.body.clientWidth < 680? "680px" : document.body.clientWidth > 960? "960px" : "auto");
    			}
    			
    			 */
    			 
    			/* IE 6 Doesn't Understand Min-Height */
    			* html #container-page { 
    				height: 100%; 
    			}
    			#columns-wrap {
    				min-height: 100%;
    				padding-bottom: 175px;
    				background: url(BF.gif) repeat-y top right;
    			}
    			#columns-wrap:after {
    				content:" ";
    				display: block;
    				clear: both;
    			}
    			/* Another IE Hack */
    			* html #columns-wrap, * html #primary-content {
    				height: 1px;
    			}
    			
    			#footer {
    				clear: left;
    				background: black;
    				color: white;
    				position: absolute;
    				bottom: 0;
    				height: 175px;
    				width: 100%;
    				margin: 0 auto;
    			}
    
    			/* --------------------------------------------------- */
    
    			/* Left Column */
    			#primary-content, #footer-info  {
    				float: left;
    				padding: 0 15px;
    				margin: 20px 370px 20px 0;
    			
    			}
    			
    			/* Middle Column */
    			#news-content, #footer-directories {
    				float: left;
    				position: relative;
    				width: 159px;
    				padding: 0 15px;
    				margin: 20px 0 20px -380px;
    				border-left: 1px solid #E5E5E5;
    			}
    			
    			/* Right Column */
    			#side-content, #footer-tools {
    				float: left;
    				position: relative;
    				width: 159px;
    				padding: 0 15px;
    				margin: 20px 0 20px -190px;
    				border-left: 1px solid #E5E5E5;
    			}
    			
    			#secondary-content, #footer-resources {
    				float: right;
    				position: relative;
    			}
    			
    		</style>
    		
    	</head>
    
    	<body id="home">
    		<div id="container-page">
    			<div id="columns-wrap">
    			
    				<!-- 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>
    					<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    					<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
    				</div>
    				<!-- left column out -->
    				
    				<div id="secondary-content">
    					
    					<!-- middle column in -->
    					<div id="news-content">
    						<h4>Headings</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>
    					<!-- middle column out -->
    				
    					<!-- right column in -->
    					<div id="side-content">
    						<h4>Headings</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>
    						<h4>Headings</h4>
    						<p>text filler make text silly filler make filler very silly make text very very text make long filler 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>
    					<!-- right column out -->
    					
    				</div>
    			
    			</div>
    			<div id="footer">
    				
    				<!-- footer left column in -->
    				<div id="footer-info">
    					<p>column long long column very long fill fill fill<br />
    					   lumn filler make silly long long fill very.</p>
    				</div>
    				<!-- footer left column out --> 
    				
    				<div id="footer-resources">
    					
    					<!-- footer middle column in -->
    					<div id="footer-directories">
    						<dl>
    							<dt>Directories:</dt>
    							<dd><a href="">List 1</a></dd>
    							<dd><a href="">List 2</a></dd>
    							<dd><a href="">List 3</a></dd>
    						</dl>
    					</div>
    					<!-- footer middle column out -->
    					
    					<!-- footer right column in -->
    					<div id="footer-tools">
    						<dl>
    							<dt>Tools:</dt>
    							<dd><a href="">List 1</a></dd>
    							<dd><a href="">List 2</a></dd>
    							<dd><a href="">List 3</a></dd>
    						</dl>
    					</div>
    					<!-- footer right column out -->
    					
    				</div>		
    				
    			</div>
    		</div>
    	</body>
    </html>
    Last edited by wyclef; 12-14-2006 at 09:51 PM.

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    217
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, I've almost got this set. I've simplifed my page layout and removed most of the graphics in hopes to help the troubleshooting process a bit more. I've included code to 2 files. The first one works ok...the problem is, due to some background graphic layering I'm working on I need to remove the #masthead DIV out of the #inner-wrap div. The problem I run into doing this 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 little luck pinpointing the issue. This seems to be very close to working so I'd really appreciate another look. Thanks a lot.

    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>
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •