3D borders in CSS

overlapping on right

[Lorel]

I'm trying to set up a 3D border around content using CSS with 3 colors. The whole thing expand as the page enlarges using margin auto and width 100%. However the 3 colors overlap on the right side.

Can anyone tell me how to fix it so it doesn't overlap on the right?

--------CSS-----------

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

#content2 { width:100%;
margin-left:auto;
margin-right:auto;
border:2px solid #996633; }

#content3 { width:100%;
margin-left:auto;
margin-right:auto;
border:2px solid #ffcc00; }

-------HTML-----------

<div id="content1">
<div id="content2">
<div id="content3">

---text goes here-----

</div></div></div>

[ergophobe]

I'm sort of a CSS philistine, but off the top of me head...

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

- content 2 should be
-- left border is at pixels 3-4
-- content box is at pixels 5-96
-- right border is at pixels 97-98

[Lorel]

Thanks for the explanation egophobe. However if there is a solution to this problem with 100% width box I'm not aware of what the solution might be. If I missed it please explain if you have the time. I have the page set for 100% width so didn't want to use a set width box for the content area

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; }

#content2 { width:654px;
margin-left:auto;
margin-right:auto;
border:2px solid #996633; }

#content3 { width:650px;
margin-left:auto;
margin-right:auto;
border:2px solid #ffcc00; }

[ergophobe]

If you're going to mix percentages and pixels, you have to do one of two things

- 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.

#content1 {
width:100%;
margin: -2px;
border:2px solid #000000;
}

[master w bates III]

you don't need to set a width for block level elements. they are automatically 100% width of their containing element.

a much more simple and elegant solution would be to set all of the divs relative:

#content1 { 
 margin-left:auto; 
 margin-right:auto; 
 border:2px solid #000000; 
 position: relative;}
 #content2 { 
 margin-left:auto; 
 margin-right:auto; 
 border:2px solid #996633; 
 position: relative;} 
 #content3 { 
 margin-left:auto; 
 margin-right:auto; 
 border:2px solid #ffcc00; 
 position: relative;}

then you can set content1 to whatever width you want and the inner ones will resize.

an even more elegant would be to ditch all of those id's and just to this...

<div id="content1"> 
 <div> 
 <div>
 asdfasdfasdfasdf
 </div>
 </div>
 </div>
div#content1 {
 border:2px solid #000000; 
 position: relative;
 }
 #content1 div { 
 border:2px solid #996633; 
 }
 #content1 div div{ 
 border:2px solid #ffcc00; 
 } 

[ergophobe]

>>they are automatically 100% width of their containing element

Doh! Obviously. Got stuck on the original scenario. Yes, there's not typically any reason to say a block-level element is width:100% unless there's something to prevent it from being so.