SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box model: lost parent element scrollbar

    The first sample shows scrollbars correctly:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #parent {width:102px; height:101px; background:red; overflow:auto;}
    #child {width:100px; height:100px; margin:1px; background:green;}
    </style>
    </head>
    <body>
    <div id="parent">
    <div id="child"></div>
    </div>
    </body>
    </html>
    But the second doesn't:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #parent {width:101px; height:102px; background:red; overflow:auto;}
    #child {width:100px; height:100px; margin:1px; background:green;}
    </style>
    </head>
    <body>
    <div id="parent">
    <div id="child"></div>
    </div>
    </body>
    </html>
    Why is that?
    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    "Correctly" is a loaded term, and it's best not to use it in this context. It's better to say that you don't see what you expect to see. What do you expect to see in the second example?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    In the second example the margin right is over constrained and therefore treated ignored and therefore you will have no scrollbars.

    The specs explain the exact behaviour but basically if there is no room for the right margin in its container (i.e. it is over constrained) then the right margin is ignored.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    In the second example the margin right is over constrained and therefore treated ignored and therefore you will have no scrollbars.

    The specs explain the exact behaviour but basically if there is no room for the right margin in its container (i.e. it is over constrained) then the right margin is ignored.
    Many thanks for the informative answer!
    I just tested both examples in IE8 and the latest version of Opera and saw they ignore the bottom margin too -- they show scrollbars in neither of the sample codes. Not sure if this is the right behavior according to specs or what other browsers do.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    Many thanks for the informative answer!
    I just tested both examples in IE8 and the latest version of Opera and saw they ignore the bottom margin too -- they show scrollbars in neither of the sample codes. Not sure if this is the right behavior according to specs or what other browsers do.
    It only seems to be Opera that does that (ie9 in ie8 mode doesn't do it but that may just be a quirk). Chrome, Firefox and IE9 all take notice of the bottom margin. It's unclear from the specs (to me) what the exact behaviour should be for boxes with overflow other than visible but I would hazard a guess that Opera is incorrect here.


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
  •