Footer not being pushed to bottom in CSS layout

[Chris]

If you go to http://194.129.129.161/test.htm Can anyone tell me why my
footer in my layout is not pushed down beneath the textual content div. The
footer div in IE 7 and Firefox goes across the top of my text even though
the div appears beneath the text div.

This will form the basis of a database driven system so I will not know how
big the text will be. I have posted link as it is little difficult to
explain. Regards, Chris.

 

[Rik]

If you go to http://194.129.129.161/test.htm Can anyone tell me why my
footer in my layout is not pushed down beneath the textual content div.
The
footer div in IE 7 and Firefox goes across the top of my text even though
the div appears beneath the text div.

This will form the basis of a database driven system so I will not know
how
big the text will be. I have posted link as it is little difficult to
explain.

Because you have given the #content a height that's not big enough to hold
the text. The text overflows, the box will not grow according to the
specs, as it has a set height. Remove the height, and you're fine. I think
you meant to use min-height, then again, MSIE6 does not know min-height...
It treats height as min-height.

 

[Roy A.]

If you go tohttp://194.129.129.161/test.htmCan anyone tell me why my
footer in my layout is not pushed down beneath the textual content div. The
footer div in IE 7 and Firefox goes across the top of my text even though
the div appears beneath the text div.

This will form the basis of a database driven system so I will not know how
big the text will be. I have posted link as it is little difficult to
explain. Regards, Chris.

Your document is encoded in windows-1252. Try to use utf-8 or include
<?xml version="1.0" encoding="windows-1252"?>
in you document.

Use 'min-height:400px' insted of 'height:400px', or no height at all.

Put the styles in a stylesheet and use an IE conditional comment

<!--[if lt IE 7]>
<style type="text/css">
#navigation { height: 400px }
#content { height: 400px }
</style>
<![endif]-->

 

[Chris F.A. Johnson]

If you go to http://194.129.129.161/test.htm Can anyone tell me why my
footer in my layout is not pushed down beneath the textual content div. The
footer div in IE 7 and Firefox goes across the top of my text even though
the div appears beneath the text div.

When I see height and width specified in px units, I automatically
assume that that is the cause of the problem. And usually it is;
your page is no exception.

Because of fixed widths, your page works *only* in an 800px-wide
window.

See a modified version of your page at:

This will form the basis of a database driven system so I will not know how
big the text will be.

If you don't know how high the text is going to be, why do you use
fixed heights (measured in px)?

I have posted link as it is little difficult to explain.

That's the right way to do it.

 

[Roy A.]

Use 'min-height:400px' insted of 'height:400px', or no height at all.

Put the styles in a stylesheet and use an IE conditional comment

<!--[if lt IE 7]>

It should be: if "less than" IE 6: <!--[if lt IE 6]>

"With Internet Explorer 7, the min-height/max-height properties apply
to floating and absolutely positioned block level elements and inline-
block elements, as well as some intrinsic controls."

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/minheight.asp

 

[Chris]

Thanks alot

When I see height and width specified in px units, I automatically
assume that that is the cause of the problem. And usually it is;
your page is no exception.

Because of fixed widths, your page works *only* in an 800px-wide
window.

See a modified version of your page at:


If you don't know how high the text is going to be, why do you use
fixed heights (measured in px)?


That's the right way to do it.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)