212154 - CSS width at 100% for block elements overflows when padding or margin is applied

Status: VERIFIED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Nick Horgan]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)

Create a block element (DIV,SPAN or P etc) contained within the BODY or other
block element with the CSS width set to 100%. Adding a padding attribute
increases overall width of the element by the padding amount. If the parent is
BODY or IFRAME then scrollbars will appear.

Reproducible: Always

Steps to Reproduce:



Expected Results:  
The width of the block should be reduced by the padding amount.

Comment 1

[Eric A. Meyer (dead account)]

No, it shouldn't be.  Padding, borders, and margins are added to the content
width, and the content width is defined by 'width'.  Browsers that subtract
padding and borders from the 'width' value are doing the wrong thing. -> INVALID.

Comment 2

[Mats Palmgren (inactive)]

You can try  "-moz-box-sizing:border-box;" if you like.

That property could be deprecated when the CSS3 box-width/box-height
are implemented though... http://www.w3.org/TR/css3-box/#the-box-width

Verified invalid.

Comment 3

[Dan Van Brunt]

I have read over and over the comments on this bug and I still am not sure what
either of you are saying so here's my take on it.

1.create basic HTML page
2.add style to body setting margin:0px
3.create a div tag within the body of the HTML page
4.add the following style to the div
.divtag {
	background-color: #0099FF;
	height: 300px;
	width: 100%;
	margin: 2px;
}
5.Knowtice that the right margin of the div is missing and the div touches the
right side of the window.

Correct me if I'm wrong but the only way I can use "one" div and get a 100%
width blue box with a 2px border is by using the previous "divtag" style.
The post by Eric A. Meyer seems incorrect. 

"Browsers that subtract
padding and borders from the 'width' value are doing the wrong thing."

If that is true, then how would a designer create a page with a 100% width blue
div with a 2px border and not have the border be cut off by the browser?

Comment 4

[Dan Van Brunt]

As a follow up. 
If the div that the margin is applied to is an absolute width...eg 200px then
the margin width should be added to the overall width yes. But, is the div has a
percentage width eg.... 100% then the margin width should be subtracted for the
overall width.
-IMHO