Padding increases width?

Giganews Newsgroups
Subject: Padding increases width?
Posted by:  Jacob Weber (jac…@jacobweber.com)
Date: Sat, 31 Jul 2004

I'm having a problem that's happening in both Mozilla and Safari, so I'm
sure it's due to a misunderstanding on my part. I'm using the following
code:

<div style="width: 100%; background-color: green">First</div>
<div style="width: 100%; background-color: brown; padding-left:
10px">Second</div>

I want both boxes to be the full width of the browser, so the left and
right edges align. I also want the content of the second box to be
indented to the right by 10 pixels.

But the padding-left is causing the right side of the second box to push
out past the edge of the browser. I understand that the "width" property
defines the width of the content, not the box, but is there a way to
ensure that the whole box is a certain width?

Thanks,
Jacob

Replies