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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Centering Footer

    Anyone know how I can center this footer without changing the positioning from absolute?

    Code:
    <!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" lang="en">
    	
    	<head>
    
    		<title></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';
    						// alert('windowHeight:'+windowHeight+', contentHeight:'+contentHeight+', footerHeight:'+footerHeight);
    					}
    				}
    			}
    		}
    		window.onload = function() {
    			setFooter('footer');
    		}
    		window.onresize = function() {
    			setFooter('footer');
    		}
    		</script>
    		
    		<style type="text/css">
    		body {
    			margin: 0; padding: 0;
    			background: #fff;
    			font-family: Palatino, Georgia, Times, serif;
    			color: #333;
    		}
    		
    		#banner, #colors, #column_wrap {
    			width: 800px; height: 76px;
    			margin: auto;
    		}
    		
    		#home #banner, #home #colors, #home #column_wrap {
    			height: 150px;
    		}
    		
    		#container {
    			width: 800px;
    			margin: auto;
    		}
    		
    		#column_wrap {
    			padding-top: 52px;
    			background: #ccc;
    		}
    		
    		#footer {
    			width: 800px; 
    			margin: 0 auto; padding: 25px 0 25px 0;
    			color: #fff; 
    			text-align: center;
    			position: absolute;
    			background: #c00;
    		}
    		</style>
    		
    	</head>
    
    	<body id="home">
    	
    	<div id="container">
    		<div id="column_wrap">
    		Content Content
    		</div>
    	</div>
    	
    	<div id="footer">
    		lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    	</div>
    	
    	</body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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