Stylesheets - Footer to extend across page width

Author

Footer to extend across page width

Tristan Miller

2003-12-22, 6:29 pm

Greetings.

I have a two-column web layout, where the first column is just the regular
body text with a "marign-right" of 16em, and the second column is an
"absolute"-positioned div with a width of 16em.

I would like to have a footer extending across the entire width of the page,
at the very bottom of the page (i.e., after both columns end). How can I
do this? There is no way of knowing in advance which of the two columns
will be longer.

If I use "absolute" positioning and specify a "bottom" of 0, I get the
footer positioned at the bottom of the window, and it scrolls up with the
rest of the page when I scroll down to the end of the columns. Setting
"clear: both" doesn't seem to have any effect either. I don't want to use
"fixed" positioning because it's broken in MSIE, and don't want the footer
to scroll along with the page anyway. I just want it waiting there at the
end.

Here's a link to the HTML and CSS itself, followed by some relevant snippets
from the CSS file:

http://www.dfki.uni-kl.de/~miller/
http://www.dfki.uni-kl.de/~miller/dfki_css.css

body {
margin-right: 16em;
}

#sidebar {
position: absolute;
top: 90px;
right: 1.1em;
width: 16em;
padding-right: 0;
padding-bottom: 0;
}

#footer {
/* what goes here?? */
}

Any help would be greatly appreciated.

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

William Tasso

2003-12-22, 9:29 pm

Tristan Miller wrote:

[http://www.dfki.uni-kl.de/~miller/]

quote:

> ...
> I have a two-column web layout, where the first column is just the
> regular body text with a "marign-right" of 16em, and the second
> column is an "absolute"-positioned div with a width of 16em.

Have you considered floating the second column instead?

quote:

> I would like to have a footer extending across the entire width of
> the page, at the very bottom of the page (i.e., after both columns
> end). How can I do this? There is no way of knowing in advance
> which of the two columns will be longer.

clear:both is a popular method - pehaps it will work in your circumstances.

--
William Tasso - http://WilliamTasso.com

Neal

2003-12-23, 3:28 am

"Tristan Miller" <psychonaut@nothingisreal.com> wrote in message
news:1431254.NGF77caq2O@ID-187157.news.dfncis.de...

quote:

> Greetings.
>
> I have a two-column web layout, where the first column is just the regular
> body text with a "marign-right" of 16em, and the second column is an
> "absolute"-positioned div with a width of 16em.
>
> I would like to have a footer extending across the entire width of the

page,

quote:

> at the very bottom of the page (i.e., after both columns end). How can I
> do this? There is no way of knowing in advance which of the two columns
> will be longer.
>
> If I use "absolute" positioning and specify a "bottom" of 0, I get the
> footer positioned at the bottom of the window, and it scrolls up with the
> rest of the page when I scroll down to the end of the columns. Setting
> "clear: both" doesn't seem to have any effect either. I don't want to use
> "fixed" positioning because it's broken in MSIE, and don't want the footer
> to scroll along with the page anyway. I just want it waiting there at the
> end.
>
> Here's a link to the HTML and CSS itself, followed by some relevant

snippets

quote:

> from the CSS file:
>
> http://www.dfki.uni-kl.de/~miller/
> http://www.dfki.uni-kl.de/~miller/dfki_css.css
>
> body {
> margin-right: 16em;
> }
>
> #sidebar {
> position: absolute;
> top: 90px;
> right: 1.1em;
> width: 16em;
> padding-right: 0;
> padding-bottom: 0;
> }
>
> #footer {
> /* what goes here?? */
> }

The typical solution:

#header {
position: absolute;
top: 0;
left: 0;
}

#text {
float: left;
margin-top: (whatever clears the header);
width: (either a % or the actual size);
}

#sidebar {
float: right;
margin-top: (whatever clears the header);
width: (either a % or the actual size);
}

#footer {
clear: both;
}

If you move your header div to the top of the code, you can avoid having to
set a top margin on the floats, and they'll automatically line up OK. Just
eliminate the absolute positioning on it and those puppies will float fine.
In any case, your footer div should be at the end of the code as it is.