SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still can't get my head around footers

    While I'm mainly a PHPer I've been using a lot of CSS for positioning of my elements on my new site www.horrorexpress.com. The problem with it is I *still* can't figure out how to get a classic footer to display at the very bottom of the page (no matter how long it is).

    Pretty much everything on the page is absolutely positioned, and this is where I think the problem with the footer positioning is coming in.
    Is there no way to position below an absolutely positioned element?

    Like I said CSS ain't my forte, so I'm hoping you guys can help.
    Thanks.
    HorrorExpress.com - all the latest Horror Movie Reviews and News

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    How about:

    For all of your content, place that in one <div> and place any other content in nested <div>s to the first one. Then another <div>, not nested, for your footer.

    --Vinnie

  3. #3
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I've just tried that Vinnie, unfortunately it still doesn't seem to solve the problem.

    If I place the footer information in a blank div outside of a global div that everything else is in it simply places it above everything that is absolutely positioned.
    Absolute positioning was a godsend when I discovered it, it allowed me to place different elements of my content exactly where I wanted, but as far as I have experienced it seems to create unresolvable issues such as this.

    What I need is a way of specifying the footer to go at the very bottom of the document, and not the browser window.
    And as far as I can gather that can't yet be done in CSS?
    Last edited by JohnShaft; Dec 9, 2002 at 16:20.
    HorrorExpress.com - all the latest Horror Movie Reviews and News

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by JohnShaft
    Thanks, I've just tried that Vinnie, unfortunately it still doesn't seem to solve the problem.

    If I place the footer information in a blank div outside of a global div that everything else is in it simply places it above everything that is absolutely positioned.
    Absolute positioning was a godsend when I discovered it, it allowed me to place different elements of my content exactly where I wanted, but as far as I have experienced it seems to create unresolvable issues such as this.

    What I need is a way of specifying the footer to go at the very bottom of the document, and not the browser window.
    And as far as I can gather that can't yet be done in CSS?
    Try designing your site this way (crude text art alert!):
    Code:
    -------------------------------------------------------
    | main div                                            |
    |  ------------------------------------               |
    |  | other divs for nav, content, etc.|               |
    |  |                                  |               |
    |  |                                  |               |
    |  ------------------------------------               |
    |     -------------------------------                 |
    |     | another div for good measure|                 |
    |     -------------------------------                 |
    |-----------------------------------------------------|
    -------------------------------------------------------
    |this is your footer div. insert disclaimer here      |
    -------------------------------------------------------
    If you are to position your divs, position them absolutely WITHIN the main div. Then don't position the main div or footer div, just let them float. Your footer div should fall into place right underneath the main div. Your actual HTML should look like this:
    Code:
    <html>
    <head><title>Footer Test</title>
    </head>
    <body>
    <div id="main">
      <div id="nav" style="position:absolute;left:blah blah"></div>
      <div id="headerimg"><img src="header.gif" alt="header" />
      </div>
      <div id="content">
      content, blah blah blah.
      </div>
    </div>
    <div id="footer">
    &copy; 2002 yoursite.com. all rights held hostage.
    </div>
    Hope this helps!

    --Vinnie

  5. #5
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed help Vinnie, much appreciated.
    I think I understand the logic of it now, and the workaround.

    The real problem I have is that the site is coded in PHP, and has many includes, each in it's own box, each absolutely positioned.

    So even though your solution should definitely work my code is so compartmentalised I would have to disrupt the flow too much to get around it without using absolute positioning.

    CSS really needs some property to specify position in relation to the whole document (no matter it's size) and not just the browser window I guess.
    HorrorExpress.com - all the latest Horror Movie Reviews and News

  6. #6
    SitePoint Member
    Join Date
    May 2002
    Location
    Ljubljana, Slovenia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    relative positioning

    The trick is not to absolutely position the header. Just let it be the first div you put in your code.


Bookmarks

Posting Permissions

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