indented borders?

[nightster]

Hello all...

I really like what this site has done with it's borders around the whole site...they are indented slightly from the edge of the page - looks really good I think.

http://www.challengechurchill.co.uk

Anyone know how to achieve that easily using css?

I'm a css newbie, so any help you can give would be much appreciated!

Thanks,
Rob.

[Wiz Creations]

They made the background that color blue and put an 8px padding on the body

BODY {
margin:0px auto;
padding:8px;
background:#0080C0;
}

This is similar to what they used. I took out the excess attributes.

[nightster]

Thanks but I don't think thats it...

That would bring the content in by 8px, but wouldn't bring the border in would it?

Any other ideas?

Thanks,
Rob.

[KDLA]

They've done this with a wrapper div and a content div set with a border.
Example code:
CSS:

body {background-color: #000; text-align: center;}
#wrapper {background-color: #fff; padding: 12px; margin: 0 auto; text-align: left; width: 750px;}
#content {border: 1px solid #000;}

HTML:

<div id="wrapper">
<div id="content">
<p>Lorem ipsum....</p>
</div>
</div>


KDLA

[nightster]

That's FANTASTIC - spot on! Thanks very much.

I must learn more css ;-)

Cheers,
Rob.

[Wiz Creations]

Oh sorry... I didn't even notice that white border outside the 1px blue one.