Welcome to WebmasterWorld Guest from 54.198.179.85

Forum Moderators: not2easy

Message Too Old, No Replies

3D borders in CSS

overlapping on right

     
6:07 pm on Feb 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts: 1793
votes: 2


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>

4:53 pm on Feb 25, 2008 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8272
votes: 130


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

5:43 pm on Feb 25, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:1793
votes: 2


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

9:31 pm on Feb 25, 2008 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8272
votes: 130


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

5:07 am on Feb 26, 2008 (gmt 0)

New User

5+ Year Member

joined:Nov 5, 2007
posts:17
votes: 0


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

3:39 pm on Feb 26, 2008 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8272
votes: 130


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