0

I have a site that I need a sticky footer. I would like the footer to always be at the bottom of the page no matter what the users screen size. If the content goes longer than the screen I want the footer to move down with it. I want this to be all DIVs with no tables.

The below post is what I am looking for although the answer does not work with asp.net tag. When I have the form tag all css is ignored. As soon as I take out the form tag the footer sticks to the bottom perfectly.

How do you get the footer to stay at the bottom of a Web page?

Community
  • 1
  • 1
Boone
  • 1,046
  • 1
  • 12
  • 30
  • 2
    I think the word you're looking for is "sticky footer". Does this help? http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page – Gordon Gustafson Feb 01 '11 at 02:35
  • CrazyJugglerDrummer - That helped out..But it does not work with asp.net
    tag.
     – Boone Feb 01 '11 at 05:56

2 Answers2

1

In your css set the display property on header, content and footer divs to block.

#header {
display:block;
}

#content {
display:block;
}

#footer {
display: block;
}

If your header, content, and footer divs appear in your html page in that order then the footer should always appear beneath your content, unless there is other markup in your code that's not being shown in the example.

JimB
  • 319
  • 2
  • 5
  • This would put the footer at the bottom of the sections but not at the bottom of the page like I want. – Boone Feb 01 '11 at 15:40
1

Tried following?

.fixedPosition {
       background-color:black;
       position:fixed;
       min-height:200px;
       left:0px;
       right:0px;
       bottom:0px;
    }

this will fix your wrapper to the left, right and bottom. You can then decide, what height it will have.

If there is a problem with positioning form (i dont know) try to wrapp it.

<div class="fixedPosition"><form></form></div>

Helped that?

Luke
  • 8,235
  • 3
  • 22
  • 36