Jump to content

Positioning an element at the bottom of a page


Recommended Posts

I have the following page:

 

    http://www.mattpealing.co.uk/concept/chm/

 

...and am trying to position the footer so that it is always at the bottom of the page with:

 

#footer {
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #db921a; }

 

However it only seems to be aligning with the bottom of the page, not the browser as such (see attached image).

 

Does anyone know what I might be missing?

 

[attachment deleted by admin]

Also, I've set

 

html, body {
    height: 100%;
}

 

However the body only extends to the fold, not the page as such.

 

See the attached image, I've made the body green and the html red. This is when testing at 1280 x 768, it appears fine at lager resolutions.

 

Does anyone have any ideas?

 

[attachment deleted by admin]

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.