Home/ Questions/Q 6375995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:41:15+00:00

I have a site that has the following structure: <div id=page_wrapper> <div id=header></div> <div

  • 0

I have a site that has the following structure:

<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>

Now I have set html, body and page_wrapper to 100% in CSS. The goal here is to get the footer to be at either the bottom of the content or the bottom of the window — whichever is visually lower. I’ve read a lot of things about how to do it, but I can’t seem to get it to work correctly.

html, body, #page_wrapper { height: 100%; }

#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}

#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}

It sorta seems to work. But problem I am seeing is, that if I zoom out my page_wrapper seems to almost reset its height to 100% but as I zoom in, it gets shorter and shorter and shorter causing overlap in the footer and content text instead of pushing the footer down.

Any idea how to repair something like that? I’m at my wits end with it trying to google up an answer…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Updated my answer with a test html, works quite fine in chrome 13. I tried zooming in and out and the footer stays put.

    You should put your footer outside of the page-wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of either the header or the content-wrapper to see the footer stick to the bottom of the page-wrapper instead of the browser window. If you open the html as is you will see the blue footer sticking to the bottom of the page and the page-wrapper taking up 100% of the window.

    Please note that this is broken without a fix in Firefox 4 and 5. Also it doesnt work in IE 5.5 and earlier.

    To make this work properly in IE6 add height: 100%; to #page_wrapper

    <html>
  <head>
    <style type="text/css">
    body, html {height: 100%;margin:0;padding:0;}
    #page_wrapper {min-height: 100%; background-color: red;}
    #header{height: 200px; background-color: green;}
    #content-wrapper{height: 200px; background-color: yellow;}
    #footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
    </style>
  </head>
  <body>
    <div id="page_wrapper">
      <div id="header"></div>
      <div id="content-wrapper"></div>
    </div>
    <div id="footer"></div>
  </body>
<html>

    live example of this can be found on:

    https://www.effacts.com/effacts/public?context=107

    a proper sheet and html can be found here:

    http://www.cssstickyfooter.com/

    • 0