Grow your CSS skills. Land your dream job.

Sticky footer!!- Please some one help

  • # July 13, 2009 at 10:44 am

    Hi everybody,

    I am currently working on a project which involves me working with a CMS called concrete 5. I have made the website, but just one thing which is giving me so much trouble is the footer. I have followed soo many tutorials online but I have yet not acheived making a sticky footer. My problem is, all my content is absolute positioned. When the content is updated through the CMS, the footer ends up on the middle of the page. What I want is the footer to move down as more content has been added.

    Please help me out, its very urgent!!

    Thanks,

    # July 13, 2009 at 12:01 pm

    Without any relatively positioned content, your page has no height to go on. Some things you could try:

    1. If your pages have a fixed height, wrap everything within a wrapping div with a fixed height value, relatively positioned, with a footer absolutely positioned within that to bottom: 0px;

    2. If your page is not of fixed height, try wrapping various elements within your page into relatively positioned wrapping divs – everything in your header into a header wrap, content and sidebar into another wrap, and then your footer as another relatively positioned div beneath those. They should all stack on top of one another with your footer at the bottom. If the page’s height is longer than that of your screen, no probs – if not, then you can use the Sticky Footer http://ryanfait.com/sticky-footer/ technique to push it down.

    Remember also that absolute positioning, while giving absolute control, removes those divs from the flow of the page – in other words, they don’t count as contents of your html body and therefore giving your body a height of 100% won’t fix the problem. You need something relatively positioned in order to give it height.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".