www.webdeveloper.com
Results 1 to 9 of 9

Thread: Position footer at bottom regardless of content height.

Hybrid 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 01:28 PM.

  2. #2
    Join Date
    Feb 2009
    Location
    Allentown, Buffalo, NY
    Posts
    60
    Try this. Seems to be what you want, works in FF and IE7.

    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">
    html {
    	height: 100%;
    }
    
    body {
    	height: 100%;
    }
    
    top_container {
    	height: 100%;
    }
    
    #footer {
    	position: absolute;
    	bottom: 0;
    }
    </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  2009. Stevey V3.<br />
    Designed and coded by Stevey.
    </span>
    </div>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2009
    Posts
    4
    That didn't work, it places it at the bottom of the page that's on show, not the whole page.

  4. #4
    Join Date
    Feb 2009
    Location
    Allentown, Buffalo, NY
    Posts
    60
    Maybe I'm not understanding you, because I'm not sure what the difference between a "page on show" and a "whole page" is. From what I understood of you initial post, you want the footer "pinned" to the bottom of the screen. What I gave you does this in my tests in FF3 and IE7.

  5. #5
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Neither of those solutions is going to work. When you absolutely position the footer, it has no idea where the normal flow of the document is at.

    What's an example page look like?

  6. #6
    Join Date
    Feb 2009
    Location
    Allentown, Buffalo, NY
    Posts
    60
    Clearly I'm misunderstanding the requirement, as I thought he wanted the footer to be positioned at trhe bottom *regardless* of the normal flow. So, yes, we would need more info and a link would be great.

  7. #7
    Join Date
    Feb 2009
    Posts
    4
    Quote Originally Posted by ScottPrelewicz View Post
    Clearly I'm misunderstanding the requirement, as I thought he wanted the footer to be positioned at trhe bottom *regardless* of the normal flow. So, yes, we would need more info and a link would be great.
    On a shortpage like this the code you gave me is good, but on a long page like this the footer would be in middle of the content because it goes to the bottom of the window and not the height of the browser. I'm on a 1440x900 sized screen so bare that in mind when I say it's a short page.

    Basically I want the footer to always be at the bottom if the page is 100px tall or 5000px tall.

  8. #8
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    You're going about this the wrong way. Each time you position an element absolutely, you're taking it out the document flow, as a result, none of your elements know the relation to each other.

    Having said that, here's the approach you should take:

    Float main_left and main_right to the left, remove absolute positioning. Then on your footer, get right of the positioning and give it a clear of both. That will give you a sticky footer.

    When you float main_left and main_right, you are taking these out of the normal flow, but by giving footer a clear of both, you cause footer to reset to the normal flow of the document, giving it the height it needs to "clear" main_left and main_right.
    Last edited by ryanbutler; 02-18-2009 at 04:04 PM.

  9. #9
    Join Date
    Feb 2009
    Posts
    4
    That worked, thank you very much

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