Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    So this is a problem that I remember coming up before, but I don't remember solving before :-)

    Basically, the idea is that I have a header, a sidebar, and a footer, and I want the footer to be at the bottom of the page even if the content doesn't stretch that far, and the sidebar to stretch similarly. I'm using a faux column for the sidebar, by the way. The URI follows, but it's sitting on this here home computer and is running off of WEBRick (the testing webserver for Rails), so don't hammer it too hard. Similarly, if it's down, it's my fault. The computer tends to be on 24/7 though.

    http://theoldquarter.dyndns.org:3000/

  2.  

  3. #2
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    You need to use absolute positioning to get it to the bottom.

    Create a container div and use absolute positioning to force it to fill the page:

    Code:
    /* EXAMPLE */
    
    # container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }
    
    #footer {
    /* existing code */
    position: absolute;
    bottom: 0;
    height: x px/em;
    }
    
    /* use absolute positioning to stretch the columns 'x px/em' from the bottom of the page eg. */
    
    .leftcolumn {
    position: absolute;
    bottom: x px/em;
    }
    Shove everything inside your container div.


    I'm not sure if that's the best solution (I'm no expert with this), but that's the first thing that came to mind.

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Aha! Not quite, but that gave me an idea which I'm going to try. Namely, wrap everything in a container div, as you said, but I can just relatively position the container (to give it positioning) then absolutely position the footer as bottom: 0. I'd already tried a bunch of juggling with bottom, but, like an idiot, I made it all relative positioning.

    Direct absolute positioning doesn't work, by the way, since when you say `bottom: 0', it's intepreted as `bottom of the screen', so when you scroll it stays at that place. However, absolute positioning within a relatively positioned parent might do it since that means `bottom of the container'. At least theoretically speaking. I'll try that now.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hmm. Even in a relatively positioned parent, `bottom: 0' seems to mean `0px from the bottom of the viewable area', not `0px from the bottom of the container'.

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Okay, so poking around the web seems to show that no one really does this. So a secondary question: should I do this? Is it really necessary? The current content doesn't do justice to how much information there will be on the site, but there will be some pages (click on the `Conference' menu -- not the submenus, the main `Conference' menu) that will stay short. What think ye?

  7. #6
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    Hmm, one last try. You could have the container div that has the positions defined (absolute/relative, whatever), THEN put the footer underneat that. I'm not sure if that'll mess everything up though.

    Otherwise, if most pages are going to be long, then it might just be best to leave it as it is. There's no point padding it out with empty paragraphs, or irrelevant content since it's bad design.

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, the issue is that if I put the footer under the container, it needs to have a height. And the problem is, if I give it a height, it has to be a percentage (to total up to total height of the page). And if it's a set height, it might hit issues with overflowing. Moreover, if I give it height in percentages, at certain sizes the footer may be too short for the text in it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com