0

I want my footer to always be at the bottom of the page. I tried using:

bottom:0px;
position:relative;

But that seems to let it go into the middle of the screen under the text. What am I doing wrong. I really dont want to used fixed because of the IPAD!

Exitos
  • 29,230
  • 38
  • 123
  • 178
  • always at the bottom of the page? like with fixed positioning? why don't you want to use fixed positioning? – Joseph Marikle Aug 10 '11 at 19:40
  • Have you thought of using @media-queries to change the style for the smaller iPad screen? You can keep `position: fixed` for most resolutions, but change the positioning for the iPad. – Paul Sham Aug 10 '11 at 19:41
  • Have you tried using `position:absolute;`? – ayyp Aug 10 '11 at 19:38

1 Answers1

0

Use position:absolute and make sure, that the footer is not inside another element with position:relative or position:absolute.

However, that will position your footer at the very end of your page, not at the lower rim of the screen. To do this you will have to do nasty Javascript hacks. Google for "iPad" and "position fixed" to get started.

Or see this SO question.

Community
  • 1
  • 1
Boldewyn
  • 81,211
  • 44
  • 156
  • 212
  • absolute will cause it to "float" over the main content as the user scrolls – Joseph Marikle Aug 10 '11 at 19:39
  • No, that is what fixed would do. Absolute places it at the bottom of your body. (If you mean, *when the user reaches the bottom*, that can be remedied with padding to the body.) – Boldewyn Aug 10 '11 at 19:42
  • I'm probably misunderstanding either the you or the PO... or both but this is what happens when you have a `position:absolute` element in the body: http://jsfiddle.net/XR552/ – Joseph Marikle Aug 10 '11 at 19:44
  • Ah, OK. You can remedy this, too, with a position:relative on the body: http://jsfiddle.net/XR552/2/ – Boldewyn Aug 10 '11 at 19:50
  • at which point I have to ask... why on earth is positioning even needed O_o – Joseph Marikle Aug 10 '11 at 19:54
  • Yes, that is another question. Also, why did the Mobile Webkit folks decide to drop position:fixed in the first place w/o alternative... – Boldewyn Aug 10 '11 at 19:57