CSS Forum

It overlaps because the size of the box is

left margin + left border + left padding + width + right padding + right border + right margin.

So with width as 100%
- margin: auto will be the same as "margin:0" -- no problem there

But width:100% + border: 2px means that your box size is 100% + 2px. Since you're already at 100%, there's no place for the 2 pixels to but just outside the box.

So let's say that your containing box that holds "content1" is 100px. What I would expect is (again, not tested and I am not usually daring enough to do CSS in my head)

- content1 should be
-- left border is at pixels 1+2
-- content box is at pixels 3-102
-- right border is at pixels 103-104

- content 2 should be
-- left border is at pixels 3-4
-- content box is at pixels 5-104
-- right border is at pixels 105-106

It sounds like what you're getting is

- content1 should be
-- left border is at pixels 1+2
-- content box is at pixels 3-100
-- right border is at pixels 101-102

- content 2 should be
-- left border is at pixels 3-4
-- content box is at pixels 5-100
-- right border is at pixels 101-102

If you were using Internet Explorer 6 or earlier and did not have a DOCTYPE as your very first line, you would have triggered quirks mode [google.com] and you should get

- content1 should be
-- left border is at pixels 1+2
-- content box is at pixels 3-98
-- right border is at pixels 99-100

BTW, if anyone is interested here is the css specifications for a set width box that works correctly (each box is 4 pixels larger than the one inside of it).

#content1 { width:658px;
margin-left:auto;
margin-right:auto;
border:2px solid #000000; }

- leave enough margin to be on the safe side, as in

#content1, #content2, #content3 {
width:99%
border:2px solid #000000;
}

That should work because they're nested.

The more controllable option is to nest divs one inside the other:

content1_wrapper {
width:100%;
}

content1 {
border: 2px solid...;
}

One other thing I've never tried... how would negative margins work? Not sure about that. I've used borders, negative margins and floats for laying out columns, but not sure how it would work in your case. Give it a try.