Adding padding to a relatively positioned div increases its width




CSS Parsing and Computation
17 years ago
17 years ago


(Reporter: Malte S. Stretz, Assigned: Pierre Saslawsky)



Firefox Tracking Flags

(Not tracked)





17 years ago
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.2) Gecko/20010628
BuildID:    2001062815

Check out the sample URL. The red box (a div) should not be that large  (it's
width is 60% and it's left position is 40%) and it should not extend the
surrounding td. The div is positioned relatively and has a padding assigned. The
div's width is extended by the size of the padding.
Works fine in Opera 5.11 and IE 5.something.

Reproducible: Always
Steps to Reproduce:
Create a block element (I tested only div) with a relative position and size
(hmmm... does this only happen when you use percentages as coordinates? too
tired to check it out) and a (inner) padding. See what happens to it's size...

Actual Results:  The div was larger than I told it to be.

Expected Results:  Mozilla should have rendered it smaller ;-) Especially it
should not have added the padding to the width (because padding is a inner
actually, "width" does not include "padding" (see

However there does seem to be a positioning bug here....  "left" seems to be
determining the position of the _border_, not the edge of the content area.

setting status to NEW so hixie will take a look.
Ever confirmed: true
OS: Windows 2000 → All
Hardware: PC → All

Comment 2

17 years ago
Removing the apostrophe in "it's" to satisfy the pedant in me.
Summary: adding a padding to a relatively positioned div increases it's width → Adding padding to a relatively positioned div increases its width

Comment 3

17 years ago
Boris: You're right, 'width' doesn't include the padding. I had not read the description of 'width' attentive enough before I bloated into here. (BTW, who declared 'width' to work this way? That's stupid, I think. When I assign a width on a block element I expect it to change the box-, not the content-width. But that's off-topic :o)
BUT: According to the properties 'min-width' and 'max-width' affect the "box widths" and not the "contents widths". So should do the trick, I think. But it doesn't. (To be true: Don't even Opera and the IE do render this one correctly. *g*)

Alex: Thanks :o)

Comment 4

17 years ago
...and, as you can see, Opera doesn't support the 'wrap' attribute on 
'textarea's. Ok, it's not included in the HTML4-Spec, but it would be cool if 
it were. But that's really not your fault ;)
Alex, as far as I know 'min-width' and 'max-width' only affect the 'width' of
the content, not the size of the box.  See, the erratum for
section 10.3.3 in support of this...
OK.  I've read the spec some more and this looks invalid.

The positioning "bug" I saw is actually necessitated by the following erratum
(from ):

  The properties 'top', 'right', 'bottom', and 'left', incorrectly refer to
  offsets with respect to a box's content edge. The proper edge is the margin
  edge. Thus, for 'top', the description should read, "This property specifies
  how far a box's top margin edge is offset below the top edge of the box's
  containing block."
Marking invalid since we seem to be doing this correctly... What you probably
want here is "width: auto" and setting the left and right margins to 0 explicitly.
Last Resolved: 17 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.