Footer not being pushed to bottom in CSS layout

Discussion in 'HTML' started by Chris, Feb 20, 2007.

  1. Chris

    Chris Guest

    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.
    Chris, Feb 20, 2007
    #1
    1. Advertising

  2. Chris

    Rik Guest

    On Wed, 21 Feb 2007 00:54:58 +0100, Chris <> wrote:

    > 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.
    --
    Rik Wasmus
    Rik, Feb 21, 2007
    #2
    1. Advertising

  3. Chris

    Roy A. Guest

    On 21 Feb, 00:54, "Chris" <> wrote:
    > 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]-->
    Roy A., Feb 21, 2007
    #3
  4. On 2007-02-20, Chris wrote:
    > 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:
    <http://cfaj.freeshell.org/testing/test.htm>.

    > 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.

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

    Roy A. Guest

    On 21 Feb, 03:12, "Roy A." <> wrote:

    > 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
    Roy A., Feb 21, 2007
    #5
  6. Chris

    Chris Guest

    Thanks alot :)

    "Chris F.A. Johnson" <> wrote in message
    news:...
    > On 2007-02-20, Chris wrote:
    >> 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:
    > <http://cfaj.freeshell.org/testing/test.htm>.
    >
    >> 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.
    >
    > --
    > Chris F.A. Johnson <http://cfaj.freeshell.org>
    > ===================================================================
    > Author:
    > Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris, Feb 21, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad

    Button not being pushed on Enter

    tshad, Aug 11, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    367
    Steve C. Orr [MVP, MCSD]
    Aug 12, 2005
  2. Dan
    Replies:
    1
    Views:
    8,358
    ainigma
    Apr 4, 2008
  3. Remy
    Replies:
    2
    Views:
    620
  4. Replies:
    1
    Views:
    571
    John Timney \(MVP\)
    Jun 19, 2006
  5. Arachnid
    Replies:
    0
    Views:
    769
    Arachnid
    Oct 5, 2007
Loading...

Share This Page