Results 1 to 2 of 2

Thread: Box model: lost parent element scrollbar

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Default 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
    Join Date
    Nov 2012
    Location
    The Netherlands
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If you adjust the width or height from the second example #child element the scrollbars will show.

    This is because the margin is 1 pixel so the total width/height will be 102 pixels.

Similar Threads

  1. Replies: 6
    Last Post: 01-12-2011, 08:22 PM
  2. Year-Make-Model script
    By jagsweb in forum Looking for such a script or service
    Replies: 1
    Last Post: 12-06-2010, 07:23 PM
  3. Replies: 2
    Last Post: 01-23-2010, 12:25 AM
  4. Replies: 8
    Last Post: 05-14-2008, 01:14 AM
  5. Box Model Problem?
    By Jamiecambs in forum CSS
    Replies: 7
    Last Post: 09-08-2005, 08:03 PM

Tags for this Thread

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
  •