Results 1 to 16 of 16

Thread: XHTML - Footers

  1. #1
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts

    XHTML - Footers

    Quick question this time: how can I get a div to go right to the bottom of the page? The best I've got at the moment is for the div to go to the bottom of the window - fine if the text doesn't fill the screen, but if the text goes beyond the bottom of the screen it obviously doesn't work as I would hope!

    I'm currently using this CSS:

    Code:
    #footer{
    	font-size:8pt;
    	text-align:center;
    	position:absolute;
    	bottom:0px;
    	left:0px;
    	width: 100%;
    }
    Any ideas?

    Thanks

    Mike
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  2. #2
    Large Member
    Join Date
    Apr 2004
    Posts
    3,720
    Thanks
    47
    Thanked
    99 times in 64 posts
    Very, very, very easy, nest your div's within another main 'container' div and put the footer at the bottom.
    To err is human. To really foul things up ... you need a computer.

  3. #3
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    If you are using any float:'s you'll need to add "clear: both" to your footer style in order to put it at the bottom.

  4. #4
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by yamangman
    Very, very, very easy, nest your div's within another main 'container' div and put the footer at the bottom.
    That works on pages where the content reaches the bottom of the page, but on other pages where the content does not fill the page, the footer div just displays at the bottom of the content, rather than at the bottom of the window.
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  5. #5
    Large Member
    Join Date
    Apr 2004
    Posts
    3,720
    Thanks
    47
    Thanked
    99 times in 64 posts
    Sorry I was confused as to what you meant.
    To err is human. To really foul things up ... you need a computer.

  6. #6
    Flak Monkey! Dorza's Avatar
    Join Date
    Jul 2003
    Location
    UK - South Wales
    Posts
    1,762
    Thanks
    34
    Thanked
    17 times in 15 posts
    • Dorza's system
      • Motherboard:
      • Asus P5B Deluxe - WiFi
      • CPU:
      • Q6600 @ 3.06Ghz
      • Memory:
      • 2GB Crucial
      • Storage:
      • 500GB Samsung SpinPoint
      • Graphics card(s):
      • Geforce 9600GT
      • PSU:
      • Cosair HX520W
      • Case:
      • LianLi something something or other
      • Monitor(s):
      • Eizo FlexScan S1910 (1280*1024)
      • Internet:
      • 2mb Virgin (when they want to give me that: else 1mb)
    I had the same problem. I got round it by adding:

    <div style="padding-bottom:100%">

    Just inside the centre column of my 3 column page layout. It makes the page go further than you want but it does sort the first problem out. I spent ages trying to sort it out, in the end i settled for the above. Hopw this helps
    Last edited by Dorza; 16-04-2005 at 01:09 AM.

  7. #7
    Marmoset Warrior
    Join Date
    Feb 2004
    Location
    Hastings
    Posts
    1,390
    Thanks
    3
    Thanked
    0 times in 0 posts
    I found exactly the same problem as you

    There are two solutions and neither of them are perfect.

    You can either use your current method (I use a PHP include to include my footer)

    or

    You can use the CSS Rule of position:absolute
    and then top: 100% (or something similar)

    The use of 100% doesn't give perfect results however as it can vary between browsers

  8. #8
    Flak Monkey! Dorza's Avatar
    Join Date
    Jul 2003
    Location
    UK - South Wales
    Posts
    1,762
    Thanks
    34
    Thanked
    17 times in 15 posts
    • Dorza's system
      • Motherboard:
      • Asus P5B Deluxe - WiFi
      • CPU:
      • Q6600 @ 3.06Ghz
      • Memory:
      • 2GB Crucial
      • Storage:
      • 500GB Samsung SpinPoint
      • Graphics card(s):
      • Geforce 9600GT
      • PSU:
      • Cosair HX520W
      • Case:
      • LianLi something something or other
      • Monitor(s):
      • Eizo FlexScan S1910 (1280*1024)
      • Internet:
      • 2mb Virgin (when they want to give me that: else 1mb)
    ^ Yeh i noticed that IE fills down more with the 100% value.

  9. #9
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Thanks Dorza and r1zeek, I think I'll just settle for having the footer at the bottom of the content.

    Quote Originally Posted by r1zeek
    You can use the CSS Rule of position:absolute
    and then top: 100% (or something similar)

    The use of 100% doesn't give perfect results however as it can vary between browsers
    I found that this caused the same problem as my first attempt - on pages with greater than a pageful of content, the footer still appears in the middle of the page. (i.e. it always appears in the same place, the same height down from the top)

    Thanks anyway guys

    Mike
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  10. #10
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    There is a min-height parameter you can use for this so you can set it to have a min-height of 100% and it will then expand accordingly if the content is greater then 100%

  11. #11
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by Iain
    There is a min-height parameter you can use for this so you can set it to have a min-height of 100% and it will then expand accordingly if the content is greater then 100%
    I've already tried that - the height percentage seems to be the percentage of the object the div is in (whether it is another div, or just the body), rather than the height of the window.

    Thanks anyway!
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  12. #12
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    I've done this before, I'll see if I can dig it up

  13. #13
    Marmoset Warrior
    Join Date
    Feb 2004
    Location
    Hastings
    Posts
    1,390
    Thanks
    3
    Thanked
    0 times in 0 posts
    Quote Originally Posted by mike_w
    I've already tried that - the height percentage seems to be the percentage of the object the div is in (whether it is another div, or just the body), rather than the height of the window.
    It'll do it whatever percentage you give it from the TOP of the page. So if you page has to scroll e.g. it's two window heights...that would be 200% under CSS...which is very confusing.

  14. #14
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by r1zeek
    It'll do it whatever percentage you give it from the TOP of the page. So if you page has to scroll e.g. it's two window heights...that would be 200% under CSS...which is very confusing.
    Hmmm, why doesn't this work: http://www.freewebs.com/justfortesting/

    The XHTML (with a bit cut out to save space) is:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="container">
    <div id="main">
    <p>text</p>
    </div>
    <div id="footer">
    <p>Hello.</p>
    </div>
    </div>
    </body>
    </html>
    The CSS:

    Code:
    main{
    	min-height:100%;
    }
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  15. #15
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    http://switch9.net/testing/footer.html

    Found it. Stripped it down a bit and added the little bit of JS so you can see the stretching in action

    I've tested it in Firefox, IE and Opera under 1024x768, it all works.

  16. #16
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by Norky
    http://switch9.net/testing/footer.html

    Found it. Stripped it down a bit and added the little bit of JS so you can see the stretching in action

    I've tested it in Firefox, IE and Opera under 1024x768, it all works.
    Thanks, that's finally solved it! It's a bit annoying though that the html, body and div must all have a height of 100% (or thereabouts).
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. www.hexus.net valid XHTML 1.0 + valid CSS 2 ?
    By LWA in forum HEXUS Suggestions
    Replies: 4
    Last Post: 29-12-2014, 12:08 PM
  2. Very simple XHTML layout. Impossible with XHTML?
    By southsider in forum Software
    Replies: 4
    Last Post: 08-12-2004, 04:59 PM
  3. Xhtml
    By mike_w in forum Software
    Replies: 38
    Last Post: 07-12-2004, 10:44 AM
  4. Invalid XHTML
    By Zathras in forum HEXUS Suggestions
    Replies: 3
    Last Post: 13-11-2004, 12:28 AM
  5. Xhtml
    By Gordy in forum Software
    Replies: 5
    Last Post: 15-03-2004, 06:54 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •