SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Canada, Ontario
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Damn div heights! Working with px and percents...

    Hey guys, I've been working on this for a DAY now just for this damn problem. It'd really help if someone could tell me if it is impossible, or point me towards something that would help me figure it out.

    Basically, I have a page and I want a header (200px height) at the top of the page. Then I want my content in the middle, and lastly a footer at the bottom.


    A nice little diagram, simple enough.

    | is the scrollbar, indicating the viewable area on the screen.

    HHHHHHH |
    CCCCCCC |
    CCCCCCC |
    CCCCCCC |
    CCCCCCC |
    FFFFFFFF |

    Now, I want the footer to be a pixel value in height as well, and if there is little or no content in the middle I STILL want the footer to remain at the very bottom.

    HHHHHHH |
    CCCCCCC |
    empty |
    empty |
    empty |
    FFFFFFFF |

    If the content exeeds the visible space on the screen the footer should be pushed down off the screen invoking the browse to utilize the vertical scrollbar.

    HHHHHHH|
    CCCCCCC|
    CCCCCCC|
    CCCCCCC|
    CCCCCCC|
    CCCCCCC|
    CCCCCCC|
    CCCCCCC
    FFFFFFFF


    I CANNOT get this to work right. I tried so many differnet methods using the height and such.

    I tried setting the body to 100%, then have a header 200px height, then set the empty content div to 100% (for testing), and what it does is it comes out with a 200px header + 100% of however big the page is, so there WILL be scroll bars when there is no content. I dont want this.

    IE.

    HHHHHHH|
    CCCCCCC|
    empty|
    empty|
    empty|
    empty|
    empty
    FFFFFFFF

    If anyone has come accross this and knows what to do please help!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If anyone has come accross this and knows what to do please help!
    You didn't look very far did you

    Theres a 3 column sticky thread at the top that explains how to do this with loads of examples.

    Also look in the faq for a more detailed description of how to place a footer on the bottom of the viewport (or document length if longer).

    Heres a taster:

    http://www.pmob.co.uk/temp/1colcentred.htm

    Have a look at the threads I mentioned for explanations and post back here with code if you still can't work it out.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Canada, Ontario
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hah! I love you man!

    I looked all over google forever, and so i was tired and didnt want to look around the forums. Next time ill know better. thanks buddy!


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
  •