centering content w/in seperate frames - scrollbar issue

Discussion in 'CSS' started by trevorhartman, Aug 10, 2006.

  1. #1
    Hi,

    On this page: http://www.trevorhartman.com/Retna/

    I'm trying to center the content of both the upper and lower frame. The difference between the frames is the top has a scrollbar and the bottom does not. I think this causes the page width to differ, resulting in different center (the two don't match up). Here is the centering code for the upper frame:

    div#content
    {
    width:841px;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-420px;
    }

    On the lower, I tried doing margin-left:-426px; which looks fine in Safari and Mac FF, but Win scrollbars are a little wider so it doesn't line up right.

    Any way around this?

    thanks,
    Trevor
     
    trevorhartman, Aug 10, 2006 IP
  2. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Avoid at ALL costs absolute positioning unless it is absolutely necessary. It "works" but you'll thank me later.

    There's better ways to center content on a page.
    see: http://www.bluerobot.com/web/css/center1.html

    anyway, if you want scroll bars to appear ALWAYS even when they are not needed, you need to use the overflow property.

    add this to your bottom frame:

    html {
    overflow-y: scroll;
    }


    And, frames are really out dated too.

    consider using an include (php, shtml, etc) and dock it to the footer with css instead: http://scott.sauyet.com/CSS/Demo/FooterDemo1.html
     
    briansol, Aug 10, 2006 IP