Rain Lover Posted November 6, 2012 Share Posted November 6, 2012 The first sample shows scrollbars correctly: <!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: <!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! Link to comment Share on other sites More sharing options...
DarkxPunk Posted November 6, 2012 Share Posted November 6, 2012 (edited) Because the parent is smaller than the child in the first example than in the second.Example one:Parent = 101px highChild = 102px high (100px + margin top 1px + margin bottom 1px)Example two:Parent = 102px highChild = 102px high (100px + margin top 1px + margin bottom 1px)That's why. If you want scroll bar just set overflow to scroll. Edited November 6, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
Rain Lover Posted November 6, 2012 Author Share Posted November 6, 2012 Because the parent is smaller than the child in the first example than in the second. Example one:Parent = 101px highChild = 102px high (100px + margin top 1px + margin bottom 1px) Example two:Parent = 102px highChild = 102px high (100px + margin top 1px + margin bottom 1px) That's why. If you want scroll bar just set overflow to scroll. In the second example the parent width is smaller than the child total width and the scrollbars should appear. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 6, 2012 Share Posted November 6, 2012 Only when the edge of child extending beyond edge of parent will scroll bars appear, the right margin of child extends beyond right edge of parent, the right edge of child is tight up against right edge of parent, because of child left margin. Link to comment Share on other sites More sharing options...
Rain Lover Posted November 6, 2012 Author Share Posted November 6, 2012 Only when the edge of child extending beyond edge of parent will scroll bars appear, the right margin of child extends beyond right edge of parent, the right edge of child is tight up against right edge of parent, because of child left margin. Thanks for the answer, but I still don't understand the difference between the first and second example although I read your explanation a few times. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 6, 2012 Share Posted November 6, 2012 Right the parent element will ignore the right margin of child element. The 1px left margin will force the child element to the right, 1px + 100 width (101px) of child element still places it within the confines of parent element which is 101px width, therefore it is not greater than the parent element width, so no scroll bars. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now