Adding a footer to a css based layout ?

I've added a footer div to a website, which I've positioned using

div#footer {width : auto ; border : 0 ; position : absolute ; bottom : 0 ;
margin : 1.33em 1.33em 1.33em 1.33em ;
background : teal ; font-size : 75% ; color : white ;}

This appears to create a full width bar in IE6/netscape7.1, and a small bar
on the left in opera 7.11, which is placed at the bottom of the browser
window, even though the content may be longer than the browser window,
forcing the browser to use vertical scroll bars to scroll down the content,
and so putting the footer over the content.

This can be seen on www.woodleyzebrasfc.com/index.html and particularly when
using a browser window that is not very tall.
This is not the effect I'm trying to create. What I want is to position the
bar at the bottom of the content, so that it can only be seen by scrolling
down the content to the bottom.

What approach should I use to get this effect ?

Also is the opera behavior where it doesn't create a full width bar correct
or is this a known opera bug. If so are there any workarounds ?


Regards
Tony

See http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

--Dan
--
FREE scripts that make web and database programming easier
http://www.analysisandsolutions.com/software/
T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409

Tony Benham wrote:

"Analysis&Solutions" <info (AT) analysisandsolutions (DOT) com> wrote in message
news:bkfcvf$f4h$1 (AT) reader2 (DOT) panix.com...

See http://scott.sauyet.name/CSS/Demo/FooterDemo1.html


By modifying my css I cannot seem to get this approach to work. I have
div#top, div#main, div#sidebar div#foorter for the top/side/main/footer
windows. I enclosed them all a contents div, which used the parameters in
the example quoted.
In IE the footer bar was at the top of the browser window with a margin, and
in NS7.1 it stays at the bottom of the browser window, even if the content
runs off the bottom as it does now.
Regards
Tony

Honestly, I wouldn't utilize this approach as it already has too many
caveats i.e. it doesn't say that it works for IE 5.0 win, what about IE
on the Mac and it doesn't work for Opera. Did you honestly expect it to
work on NN 7.1 ;-) Too limited for what you get IMO.

Have you simply tried to do the following:

div#footer {clear: both}

This won't make your footer part of the bottom of the browser window but
will keep it at the end of the content which makes more sense IMHO.

BTW you can drop the "div#" in your style sheet rules *iff* you like -
as they are not necessary (this is purely an opinion so do what you like
with it).

--Nikolaos

Nikolaos Giannopoulos wrote:

Tony Benham wrote:

Have you simply tried to do the following:

div#footer {clear: both}

Nix that as your using absolute positioning. Personally I find that
absolute positioning leads to sites that are not as fluid as they can be
and thus I avoid it if I can.

Honestly I would change the layout to one that floats sections into
place and will in the end cause you the least grief IMO.

You can use google to find other 2 column layouts - if you use one with
floats then you can apply my suggestion above.

--Nikolaos