SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Clampants's Avatar
    Join Date
    Apr 2002
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling content area overlapping footer

    CSS conundrum here...

    I've been trying to make a fairly (what I thought) simple layout: header, scrollable content area, and a footer. In a nutshell, the footer should "float" to the bottom of the browser, and the content area should meet the footer and "float" with it. Also, the content area should be able to scroll (thus, not pushing the footer off the page).

    My problem is: I can't seem to set the height of the content area to stop expanding to the bottom of the screen (so, as it is now, the scrollbar appears behind the footer). Here's a link to a working example:

    http://www.lilyhilldesigns.com/proje...tTemplate.html

    And the CSS:

    http://www.lilyhilldesigns.com/proje...s/lhStyles.css

    (they're both pretty messy...but that's what happens when I keep on trying different things in code)

    I feel as though I should be able to assign (in that offending "centeredBox" class) a value to the amount of pixels up from the bottom of the browser that div will stretch to. From what I’ve read, giving it a “bottom: 20px;” value should move the bottom value up 20px from the bottom…but it’s just not doing that.

    Anyone run into anything like this...or can give any pointers? It'd be much appreciated...thanks!

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

    I was just going to say specify the container in percentages but it seems you have already done that .

    Your centred box isn't centred in mozilla . You will need to add margin-left:auto; margin-right:auto; in order to centre it.

    The property bottom works in relation to absolutely placed elements and will then position something in relation to the bottom of the window.
    e.g.
    Code:
    .test {
     position:absolute;
     bottom:20px;
     height:85%;
     width:300px;
     background:red
    }
    (bottom when used with position-relative will move the element upwards by the amount specified from where it is.)

    Paul


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
  •