469,917 Members | 1,707 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,917 developers. It's quick & easy.

Tables VS. CSS (Footer at the bottom, 100% of the viewport)

I've tried to get CSS to give me a basic layout where I can place a
footer at the bottom of the page and the top of the page I can use for
content. I don't however want the footer to pull away from the bottom
of the viewport if the top content is small. Also, when I resize the
window I want the footer to move with the bottom of the page until I
reach the content.

Here is an example that works both in IE and Mozilla using tables. I
aslo had to use quirks mode for IE. I want to get rid of quirks mode
and use div's. Personally I don't think it can be done.

code:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<style type="text/css">
body{margin:0px;padding:0px;}
table{border-collapse:collapse;height:100%}
td{padding:0px}
#top{ background-color:red;vertical-align:top}
#bottom{height:100px;
background-color:yellow;vertical-align:top}
</style>
</head>
<body>
<table>
<tr id="top">
<td>
<h1>header</h1>Takes up the viewport minus the footer
</td>
</tr>
<tr id="bottom">
<td>
<h1>footer</h1>Located at the bottom
</td>
</tr>
</table>
</body>
</html>
Jul 20 '05 #1
5 14256
"Tyler Carver" <xf**********@yahoo.com> wrote in message
news:81**************************@posting.google.c om...
I've tried to get CSS to give me a basic layout where I can place a
footer at the bottom of the page and the top of the page I can use for
content. I don't however want the footer to pull away from the bottom
of the viewport if the top content is small. Also, when I resize the
window I want the footer to move with the bottom of the page until I
reach the content.


The following roughly thrown together page works for IE6 but isn't quite
right for Opera7.54 or Netscape7.1
Opera needs the page refreshing after it loads or the window is resized
and Netscape brings up a vertical scroll bar.

I'm not sure why it doesn't work properly, being new-ish to CSS myself, so
will watch for any replies with interest.

=================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Page</title>
</head>

<body>

<div style="width:100%; position:absolute; bottom:0; text-align:center">THIS
IS THE BOTTOM!</div>

</body>
</html>
Jul 20 '05 #2
xf**********@yahoo.com (Tyler Carver) writes:
I've tried to get CSS to give me a basic layout where I can place a
footer at the bottom of the page and the top of the page I can use for
content. I don't however want the footer to pull away from the bottom
of the viewport if the top content is small.
Have multiple advice with decreasing value:

1) Stop wanting that
2) Keep using a table
3) <http://sandbox.bednarz.nl/css/height/footer.html>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> \
The FPI is case sensitive
table{border-collapse:collapse;height:100%} #bottom{height:100px;
background-color:yellow;vertical-align:top}


You're better off declaring basically

body
{
margin: 0;
padding: 0;
}
html,
body,
table
{
height: 100%;
}
#bottom
{
vertical-align: bottom;
}

and then finetune the appearance of the box that is stuck in #bottom.
--

PiĆ¹ Cabernet,
meno Internet.
Jul 20 '05 #3
Eric B. Bednarz <be*****@fahr-zur-hoelle.org> wrote in message news:<m3************@email.bednarz.nl>...

Have multiple advice with decreasing value:

1) Stop wanting that
I've had this response a number of times. Which is why I think css is
inadequate and has a long way to go. Many reasonable and simple
things are next to impossible (especially with layout).
2) Keep using a table
It seemed I had no other option. It was solved in two seconds with a
table but I had to leave IE in quirks mode (which I hate).

3) <http://sandbox.bednarz.nl/css/height/footer.html>
This page didn't load.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

\
The FPI is case sensitive


Thanks for the tip. Stupid Visual Studio .Net formatting (which you
can't completely turn off).
Jul 20 '05 #4
xf**********@yahoo.com (Tyler Carver) wrote:
1) Stop wanting that
I've had this response a number of times. Which is why I think css is
inadequate and has a long way to go.


Does it? A footer should be positioned relative to the content,
positioning it relative to the viewport makes no sense on the web where
you have no idea of or control over the viewport height.
Many reasonable and simple
things are next to impossible (especially with layout).


Most problems are not the result of lack css inadequacies, but because
css support in IE is relatively poor.

--
Spartanicus
Jul 20 '05 #5
On 2 Sep 2004 09:21:48 -0700, Tyler Carver <xf**********@yahoo.com> wrote:
Eric B. Bednarz <be*****@fahr-zur-hoelle.org> wrote in message
news:<m3************@email.bednarz.nl>...

Have multiple advice with decreasing value:

1) Stop wanting that


I've had this response a number of times. Which is why I think css is
inadequate and has a long way to go. Many reasonable and simple
things are next to impossible (especially with layout).


Depends on how you define "reasonable". By putting an element as low as
possible - with variable space between it and the preceding content - you
are essentially asking the browser to tack it onto the bottom chrome or
lower. That's not a content-driven design.

Regardless of how attractive it is, that's not how CSS was designed.
Ultimately, what is lost if the footer bar is not flush to the bottom
chrome? Other than a perceived notion that there's wasted space below
(which is not really wasted, just extra)? You still have a very usable
page.

Remember, CSS thinks of the height of the page based on the content, not
on the viewport. Which makes all sorts of sense if you really think about
it.
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Ron Bott | last post: by
3 posts views Thread by Gary Finnigan | last post: by
31 posts views Thread by Neil | last post: by
4 posts views Thread by steve | last post: by
1 post views Thread by Okie | last post: by
11 posts views Thread by Michael7 | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.