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

VERIFIED INVALID

Status

()

Core
Layout: Block and Inline
VERIFIED INVALID
15 years ago
13 years ago

People

(Reporter: Nick Horgan, Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

15 years ago
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.
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID

Comment 2

15 years ago
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.
Status: RESOLVED → VERIFIED

Comment 3

13 years ago
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

13 years ago
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
You need to log in before you can comment on or make changes to this bug.