By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,199 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Footer to extend across page width

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Tristan Miller wrote:

[http://www.dfki.uni-kl.de/~miller/]
...
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?
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
Jul 20 '05 #2

P: n/a

"Tristan Miller" <ps********@nothingisreal.com> wrote in message
news:14****************@ID-187157.news.dfncis.de...
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?? */
}

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.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.