www.webdeveloper.com
Results 1 to 9 of 9

Thread: Position footer at bottom regardless of content height.

Threaded View

  1. #1
    Join Date
    Feb 2009
    Posts
    4

    Position footer at bottom regardless of content height.

    I've been trying for ages, and I cannot work out how to make a footer align at the bottom of a webpage regardless of how tall or small the content is.

    My website looks the same in Internet Explorer 7, Firefox, Opera and Safari. All my pages pass validation over at w3.

    At the moment each page has a different #footer style tag, this tag changes on each page, inside of the style is just 'top: ?px', this places the footer at the bottom. I've tried 'bottom: 0;' and it simply will not work, here's my code:

    Shortened CSS
    Code:
    /* Foooter CSS */
    	
    
    #footer {	
    	background: url(images/footer.png);
        	position: absolute;
    	top: 660px;
    	width: 100%;
    	height: 76px;
    }
    #footer_width {
    	width: 870px;
    	margin: 0 auto;
    	padding-top: 24px;
    }
    .footer_text {
    	display: block;	
    	font-family: "Calibri", Arial;
    	color: #4c4c4c;	
    	font-size: 12px;
    	padding-left: 17px;
    }
    Shortend HTML.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Steven Knight | Portfolio</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <!-- Seperate CSS code needed for each page for footer -->
    <style type="text/css">
    #footer {
    	top: 1121px;
    }
    </style>
    </head>
    
    <body>
    <!-- Container for top content -->
    <!-- Navigation bar and header section -->
    <div id="top_container">
    <div id="nav">
    <div id="nav_text">
    <a href="/">Home</a>
    &nbsp;&nbsp;&nbsp;
    <a href="services.htm">Services</a>
    &nbsp;&nbsp;&nbsp;
    <a href="#">Portfolio</a>
    &nbsp;&nbsp;&nbsp;
    <a href="contact.htm">Contact</a>
    </div>
    </div>
    <div id="logo">
    <div id="header">
    </div>
    </div>
    <br />
    <br />
    </div>
    
    <!-- Main section container -->
    <div id="main">
    
    <!-- Main content section -->
    <div id="main_left">
    <div id="content_header"></div>
    <div id="content_main">
    <div id="content_text">
    <span class="headline_text">PORTFOLIO</span>
    <p>
    Content
    </p>
    </div>
    </div>
    <div id="content_footer"></div>
    </div>
    
    <!-- Sidebar content section -->
    <div id="main_right">
    <img src="style/images/about.png" alt="About"/>
    <p>
    Content
    </p>
    </span>
    </div>
    </div>
    
    <!-- Footer section -->
    <div id="footer">
    <div id="footer_width">
    <span class="footer_text">
    Copyright &#169; 2009. Stevey V3.<br />
    Designed and coded by Stevey.
    </span>
    </div>
    </div>
    </body>
    </html>
    How can I make the footer section go at the bottom of the page regardless of page height without the varing top value.

    Thank you.
    Last edited by Stevey_V3; 02-18-2009 at 12:28 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles