Home/ Questions/Q 8680371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T21:13:58+00:00

I’ve looked on previous SO posts and tuts but have not had any luck

  • 0

I’ve looked on previous SO posts and tuts but have not had any luck with my own code. My footer will not stick to the bottom of the page (not the window). I don’t want content to scroll through my footer. The page sizes vary greatly in length and want to have a footer at the bottom at all times.

The leftcol, rightcol, and footer are all in the container. Any help would be awesome.

My HTML is structured as so:

<body>
 <div id = "container">
  <div id = "leftcol">
      <h2></h2>
       </p>
  </div>
  <div id = "rightcol">
      <h2></h2>
      </p>
   </div>
   <div id ="footer">
       <p>...........</p>
   </div>
 </div>
</body>

Here is my CSS:

body {
    font-family: 'Rokkitt', Georgia, serif;
    font-size: 16px;
    background-color: #FFFFFF;
    line-height: 1.3em;
    height: auto;
    color: #252525;
    }

#container {
    display: block;
    width: 1024px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    }

#leftcol {
    display: block;
    float: left;
    margin: 20px 5px 5px 15px;
    width: 660px;
    position: absolute;
    height: auto;
    padding-bottom: 20px;
    }

#rightcol {
    display: block;
    float: right;
    margin: 30px 5px 5px 780px;
    position: absolute;
    width: 275px;
    height: auto;
    }

#footer {
    position: fixed;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you need to move your footer outside of the container element and the body element and use position:absolute; and bottom:0; to always fix it to the bottom of the html element.

    I say outside of the body as, although majoritively the body tag takes o the height of the html element, there are some versions of IE in which this isn’t the case. As you haven’t pasted your HTML i obviously can’t show you the revised html but you’re css should look like:

    #footer {
    position: absolute;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
    • 0