<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?

Recommended Answers

All 3 Replies

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/

commented: Clear and to the point, thanks. +2

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...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.