0
<div class="parent">
    <div class="child"></div>
</div>

/* Final Width: 200px */
div.parent {
    width: 200px;
}

/* Final Width: 202px (with border) */
div.child {
    width: 100%;
    border: 1px solid #000000;
}

/* Final Width: 200px (with border) */
div.child {
    /* Width Inherited -- Assumed as 200px? */
    border: 1px solid #000000;
}

Why is it that works the way it does, when you would think it wouldn't, is it standard or specific to browser implementation?

Edited by Smeagel13

3
Contributors
3
Replies
4
Views
4 Years
Discussion Span
Last Post by Smeagel13
2

To my knowlodge, when you don't specify the width to 100% (last case) the browser takes care to make the child 100% of it's parent, including border and padding.

When you do specify width 100% (second case) you are saying that only the width must have 100%, without border and padding. So in the end the width will be the 100% of the parent plus border and padding.

And I think those implementaions depend on the browser.

Check those links to futher understanding:
http://www.w3schools.com/css/css_boxmodel.asp

http://www.daniweb.com/web-development/web-design-html-and-css/threads/442058/how-can-i-stretch-my-nav-bar-to-fit-width-of-browser-wothout-scroll-bar

http://css-tricks.com/the-css-box-model/

Votes + Comments
Clear and to the point, thanks.
0

Thanks @AleMonteiro, the last link explained it perfectly, well it stated what you said too:

If you don't declare a width, and the box has static or relative positioning, the width will remain 100% in width and the padding and border will push inwards instead of outward. But if you explicitly set the width of the box to be 100%, the padding will push the box outward as normal.

Learn something new everyday...

Edited by Smeagel13

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.