How to position a "footer" div? (Aligning with "bottom:0" aligns to the viewport and not to the containing element :-( )

[john]

Hi to All,

I am new to html authoring, so sorry if my terminology is not correct or
exact.

I would like to position a footer div to the bottom of the browser window.
As I research in the web shows this could be done a containing element with
"min-height: 100%;" and an absolute positioned element (div) inside, aligned
to bottom ("position: absolute; bottom:0px")

But here is the problem comes: Sometimes my page filled with more content
and vertical scrollbar shows up. In this case the bottom aligned footer not
aligned to the bottom of the containing div, but aligned to the bottom of
browser window (viewport?). This gives an erratic render because the footer
is in the middle of the content.

How can design the layout to statisfy this 2 requirement:

1) If the dynamic content of my page is less height than the browser window,
than the footer shows up at the bottom of the window
2) If the dynamic content of my page is more height than the browser window,
than the footer shows up at the bottom of the content, so we can scroll down
to see it?

thx for answer.

[Ben C]

On 2007-02-19, john <jo**@nospam.comwrote:

Hi to All,

I am new to html authoring, so sorry if my terminology is not correct or
exact.

I would like to position a footer div to the bottom of the browser window.
As I research in the web shows this could be done a containing element with
"min-height: 100%;" and an absolute positioned element (div) inside, aligned
to bottom ("position: absolute; bottom:0px")

But here is the problem comes: Sometimes my page filled with more content
and vertical scrollbar shows up. In this case the bottom aligned footer not
aligned to the bottom of the containing div, but aligned to the bottom of
browser window (viewport?). This gives an erratic render because the footer
is in the middle of the content.

How can design the layout to statisfy this 2 requirement:

1) If the dynamic content of my page is less height than the browser window,
than the footer shows up at the bottom of the window
2) If the dynamic content of my page is more height than the browser window,
than the footer shows up at the bottom of the content, so we can scroll down
to see it?

Using min-height:100% as you suggest should do exactly that, it may be
that it's just not working in the browser or browser-shaped-object
you're trying it in.

You do need the container (the one that's height:100%) to be positioned
as well, and if it's relatively positioned (as opposed to absolute or
fixed), you may need something like html, body { height: 100%; } to make
sure the percentages are all there and resolvable all the way up to the
viewport.

Even in a browser where this does work (Firefox), ISTR you get some
nasty effects when the user resizes the viewport, as if it were failing
to reflow completely with the new viewport size.

[Stan Brown]

Mon, 19 Feb 2007 09:22:30 +0100 from john <jo**@nospam.com>:

I am new to html authoring, so sorry if my terminology is not correct or
exact.

What, you didn't like the answer you got the first time?

http://groups.google.com/group/comp....aa220a75c666b5

Please don't waste the group's time by posting the identical question
more than once. If you didn't understand something about the original
answers or need to discuss them further, follow up to the original
thread and don't start a new one.

And in particular, don't waste time by posting the identical copy to
the *wrong* group. There's a CSS group, where you asked your question
first. Posting it again to the HTML group is doubly wrong.

[followups to comp.infosystems.www.authoring.stylesheets]
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Brandy Red]

john skrev:

Hi to All,

I am new to html authoring, so sorry if my terminology is not correct or
exact.

That's okey, but the answer to your question hurts my feelings.

I would like to position a footer div to the bottom of the browser window.
As I research in the web shows this could be done a containing element with
"min-height: 100%;" and an absolute positioned element (div) inside, aligned
to bottom ("position: absolute; bottom:0px")

Let it flow, you don't need to use absolute positioned elements.
Absolute positioned elements "is removed from the normal flow entirely
(...)".

http://www.w3.org/TR/REC-CSS2/visure...te-positioning

But here is the problem comes: Sometimes my page filled with more content
and vertical scrollbar shows up. In this case the bottom aligned footer not
aligned to the bottom of the containing div, but aligned to the bottom of
browser window (viewport?). This gives an erratic render because the footer
is in the middle of the content.

Absolutely positioned boxses "(...) may or may not obscure the
contents of another box, depending on the stack levels of the
overlapping boxes."

http://www.w3.org/TR/REC-CSS2/visure...te-positioning

How can design the layout to statisfy this 2 requirement:

1) If the dynamic content of my page is less height than the browser window,
than the footer shows up at the bottom of the window
2) If the dynamic content of my page is more height than the browser window,
than the footer shows up at the bottom of the content, so we can scroll down
to see it?

With nested dividers and IE hacks:

<head>
<title>Dynamic Content without Irritating Enviroment</title>
<style>
html, body { margin: 0; padding: 0; height: 100% }
.main { position: relative; min-height: 100% }
.content { padding-bottom: 3em }
.footer { position: relative; margin-top: -3em; height: 3em }
</style>

<!--[if lt IE 7]>
<style type="text/css">
.main { height: 100% }
</style>
<![endif]-->
</head>

<body>
<div class="main">
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</body>

[Roy A.]

john skrev:

Hi to All,

I am new to html authoring, so sorry if my terminology is not correct or
exact.

I would like to position a footer div to the bottom of the browser window.
As I research in the web shows this could be done a containing element with
"min-height: 100%;" and an absolute positioned element (div) inside, aligned
to bottom ("position: absolute; bottom:0px")

Let it flow, you don't need to use absolute positioned elements.
Absolute positioned elements "is removed from the normal flow entirely
(...)".

http://www.w3.org/TR/REC-CSS2/visure...te-positioning

But here is the problem comes: Sometimes my page filled with more content
and vertical scrollbar shows up. In this case the bottom aligned footer not
aligned to the bottom of the containing div, but aligned to the bottom of
browser window (viewport?). This gives an erratic render because the footer
is in the middle of the content.

Absolutely positioned boxses "(...) may or may not obscure the
contents of another box, depending on the stack levels of the
overlapping boxes."

http://www.w3.org/TR/REC-CSS2/visure...te-positioning

How can design the layout to statisfy this 2 requirement:

1) If the dynamic content of my page is less height than the browser window,
than the footer shows up at the bottom of the window
2) If the dynamic content of my page is more height than the browser window,
than the footer shows up at the bottom of the content, so we can scroll down
to see it?

<head>
<title>Dynamic Content without Irritating Enviroment</title>
<style>
html, body { margin: 0; padding: 0; height: 100% }
.main { position: relative; min-height: 100% }
.content { padding-bottom: 3em }
.footer { position: relative; margin-top: -3em; height: 3em }
</style>

<!--[if lt IE 7]>
<style type="text/css">
.main { height: 100% }
</style>
<![endif]-->
</head>

<body>
<div class="main">
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</body>