Footer

Hi,

I have a div with these css props:

margin-bottom: 1em;
position: absolute;

The div is a footer element which - as its name says - should always be at
the bottom of the page.

It works fine as long as there is no vertical scrollbar on the page.
Otherwise, if I scroll down, the footer keeps its position relative to the
top of the page, so it scrolls up and does not stay on the bottom.

Can this be solved with css?

Thank you

Chris Seidel wrote:

I have a div with these css props:
...
The div is a footer element which - as its name says - should always
be at the bottom of the page.

It works fine as long as there is no vertical scrollbar on the page.
Otherwise, if I scroll down, the footer keeps its position relative
to the top of the page, so it scrolls up and does not stay on the
bottom.

Can this be solved with css?

Have a look and study of these examples:
http://www.nrkn.com/3ColEqualPositioned/
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

--
-bts
-Friends don't let friends drive Windows

In article <4a460abe$0$30239$9b4e6d93 (AT) newsspool1 (DOT) arcor-online.net>,
"Chris Seidel" <cseidel (AT) arcor (DOT) de> wrote:

Hi,

I have a div with these css props:

margin-bottom: 1em;
position: absolute;

The div is a footer element which - as its name says - should always be at
the bottom of the page.

It works fine as long as there is no vertical scrollbar on the page.
Otherwise, if I scroll down, the footer keeps its position relative to the
top of the page, so it scrolls up and does not stay on the bottom.

Can this be solved with css?

You might get an idea or two from

<http://dorayme.netweaver.com.au/stickyFooter.html>

and

<http://dorayme.netweaver.com.au/stickyFooterLittleContent.html>

--
dorayme

Beauregard T. Shagnasty wrote:

Have a look and study of these examples:
http://www.nrkn.com/3ColEqualPositioned/
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

Hm, I cannot see how this can help me...

Chris Seidel wrote:

Beauregard T. Shagnasty wrote:

Have a look and study of these examples:
http://www.nrkn.com/3ColEqualPositioned/
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

Hm, I cannot see how this can help me...

You said, ".. Otherwise, if I scroll down, the footer keeps its position
relative to the top of the page, so it scrolls up and does not stay on
the bottom. Can this be solved with css?"

In the two examples I gave you, the footer does stay on the bottom when
you scroll. It's done with CSS - what you asked.

--
-bts
-Friends don't let friends drive Windows

On 2009-06-27, Chris Seidel <cseidel (AT) arcor (DOT) de> wrote:

Hi,

I have a div with these css props:

margin-bottom: 1em;
position: absolute;

The div is a footer element which - as its name says - should always be at
the bottom of the page.

Did you mean bottom: 1em?

It works fine as long as there is no vertical scrollbar on the page.
Otherwise, if I scroll down, the footer keeps its position relative to the
top of the page, so it scrolls up and does not stay on the bottom.

Can this be solved with css?

Yes. There are three places for a footer:

1. Bottom of the viewport (what you've got)
2. Bottom of the content
3. Whichever of 1 and 2 is lower.

Evidently you don't want 1.

If you want 2, you can make BODY position: relative, which will put the
footer 1em from the bottom of BODY, including if BODY overflows the
viewport (assuming your div is basically inside BODY and not nested in
other positioned stuff).

If you want 3, you need to also give BODY min-height: 100% (and set its
margins to 0). To make the percentage work on BODY give the root element
(HTML) height: 100% (or min-height: 100%, but it doesn't really matter
if BODY overflows HTML).

Chris Seidel wrote:

Google position: fixed. Will not work in IE6 without a fix.

Jeff

Hi,

I have a div with these css props:

margin-bottom: 1em;
position: absolute;

The div is a footer element which - as its name says - should always be at
the bottom of the page.

It works fine as long as there is no vertical scrollbar on the page.
Otherwise, if I scroll down, the footer keeps its position relative to the
top of the page, so it scrolls up and does not stay on the bottom.

Can this be solved with css?

Thank you

jeff wrote:

Google position: fixed. Will not work in IE6 without a fix.

That's it!

Thank you

Chris Seidel wrote:

jeff wrote:

Google position: fixed. Will not work in IE6 without a fix.

That's it!

Damned - does not work in IE, doesnt matter if IE6, 7 or 8.
Works fine in Firefox and Chrome.

What is the problem here?

Thank you

On Aug 19, 2:36*pm, "Chris Seidel" <csei... (AT) arcor (DOT) de> wrote:

Chris Seidel wrote:
jeff wrote:

* Google position: fixed. Will not work in IE6 without a fix.

That's it!

Damned - does not work in IE, doesnt matter if IE6, 7 or 8.
Works fine in Firefox and Chrome.

What is the problem here?

Thank you

Google for "sticky footer".