Member Avatar for Smeagel13 
<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
  • 220 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Smeagel13

Dani AI

Generated

The behavior in the example comes from the CSS box model and how the width property is computed. By default sizing uses the content-box model: percentage and length widths apply to the content box, and padding/border are added outside that content size. When width is left to the browser (auto) the UA will compute a size that fills the available space and will effectively let padding/border sit “inside” that available width; when you explicitly set width: 100% you’ve fixed the content box at the parent’s width and any border/padding are added on top of that. This is defined by CSS, not a browser bug. MDN: width · W3C: CSS Sizing. (developer.mozilla.org)

A practical fix is to change how the box is measured with box-sizing. Setting box-sizing: border-box makes the specified width include padding and border, so width: 100% will keep the element inside the parent instead of overflowing. Example:

.child {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #000;
}

Using border-box is a common, robust way to avoid the “100% + border” problem. MDN: the box model and box-sizing. (developer.mozilla.org)

Other options: leave the child width unset so the browser calculates it (auto), or subtract the border/padding explicitly using calc() if you must keep content-box semantics:

.child { width: calc(100% - 2px); border: 1px solid #000; }

If you prefer site-wide consistency, set html { box-sizing: border-box } and make other elements inherit it — but test carefully, as changing the box model can affect third-party widgets and form controls. MDN: calc-size() and sizing tips. (developer.mozilla.org)

Summary: this is expected, spec-defined behavior. ’s intuition about the difference between implicit sizing and explicit 100% was correct, and ’s reminder that the default is auto is helpful — use box-sizing: border-box (or calc()) to make the layout predictable.

Recommended Answers

All 3 Replies

Member Avatar for AleMonteiro

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
Member Avatar for JorgeM

With regard to the width property, the default value is "auto". The browser then calculates the width. Browsers that follow the CSS specification should handle it in the same manner.

http://www.w3.org/TR/CSS21/visudet.html#the-width-property

Member Avatar for Smeagel13

Thanks , 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
Be a part of the DaniWeb community

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