Double Borders?

How do you give your borders, borders?

[Cienwen]

Hello All,

I am new to CSS, but I love it so far. This will be my first CSS based site. Previously I was a tables kinda girl.

So here is my problem. The content of my site is a fixed width, 780px. I have this set in a <div> tag named “bodysquare” with a solid black, 1px border. The problem is, I want a double border. In other words, I would like my thin black border to be surrounded by a solid white, 5px border. I thought I could wrap my <div> with a <div> and set the properties accordingly and that does sort of work. It looks great on the left and the right but I have extra space on the top and the bottom. I thought I could get rid of that by setting it to inline instead of block and 0 margins and padding. But that didn’t work either. I even tried the clear option, but that doesn’t work either.

So, does anyone know how to get rid of the extra space? (I did try setting the back-ground to white also, but that makes the top and bottom about 15px tall instead of 5px, so that’s out)

Here’s my CSS for the section:

#whiteSquare {
width: 780px;
display: inline;
border: solid 5px white;
background-color: white;
padding: 0;
margin: 0;
clear: both;
}

#bodysquare {
width: 780px;
background-color: white;
border: 1px solid #3F4E61;
text-align: left;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}

Any suggestions would be great. If anyone wants a link to my test page, send me a note.

Thanks everyone,

Cienwen

[Setek]

That's the only way you can really give your borders borders, so you're on the right track :)

However:

So here is my problem. The content of my site is a fixed width, 780px. I have this set in a <div> tag named “bodysquare” with a solid black, 1px border. The problem is, I want a double border. In other words, I would like my thin black border to be surrounded by a solid white, 5px border. I thought I could wrap my <div> with a <div> and set the properties accordingly and that does sort of work. It looks great on the left and the right but I have extra space on the top and the bottom. I thought I could get rid of that by setting it to inline instead of block and 0 margins and padding. But that didn’t work either. I even tried the clear option, but that doesn’t work either.

So, does anyone know how to get rid of the extra space? (I did try setting the back-ground to white also, but that makes the top and bottom about 15px tall instead of 5px, so that’s out)

Your

#bodysquare

is the

div

within the

#whiteSquare

, isn't it?

It has 10px of top and bottom margin on it :) Which means 5px worth of parent's border, plus 10px worth of margin on the inner container, while the parent container's background colour is white... thus 15px of space. Remove the 10px of top and bottom margin on the inner (

#bodysquare

) container and you should see it gone :)

[Cienwen]

Setek you are a CSS GENIUS! That was it. Problem solved. Thank you so much.

:D

[pageoneresults]

Setek you are a CSS GENIUS!

Please, don't feed their sickness. ;)

[Setek]

Please, don't feed their sickness. ;)

Ohhh *mocks fainting*

I'm shocked!

... what if it was warranted?! *grins*

No problem Cienwen, we're always happy to help :)

[pageoneresults]

I'll have to agree, you've definitely got this CSS Guru stuff down pat. :)

I'm looking forward to reading more of your stuff.

what if it was warranted?!

It usually is. ;)

[Setek]

*laughs* cheers page :)

*returns to his "CSS God" IV drip now*