<div class="parent">
    <div class="child"></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

5 Years
Discussion Span
Last Post by Smeagel13

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:



Votes + Comments
Clear and to the point, thanks.

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.