Newbie Layout Question

[smile06]

I'm picking up web design again, but I come from the days of using tables so I'm trying to get the hang of css layout design. I'm trying to use the 3 column fluid layout template located here to start from:

http://matthewjamestaylor.com/blog/h...uirks-mode.htm

I want to adjust it to add a margin of 20px around the page to allow a background image to create a border around the page. I can't get it to work though. I can get a margin on all sides except the right...everything I do just causes the right to extend out horizontally.

It seems like the concept should work....I should be able to add a margin, reduce the size of the left and right columns and have the middle adjust to fit the width of the page including the margins. But I'm probably missing something logically with CSS.

Any help or guidance would be greatly appreciated.

[simcomedia]

Post the CSS code for the layout, please.

[smile06]

Sorry, here is the code I'm trying to use. I just need to add a 20px border around the page and can't seem to get it to work.

body {
margin:0;
padding:0;
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
#header {
float:left;
width:100%;
padding:0;
margin:0;
border-bottom:1px solid #000;
}
#header p {
padding:.5em 15px .2em 15px;
margin:0;
}
#header h1 {
padding:.2em 15px;
margin:0;
}
#header h2 {
padding:.2em 15px .7em 15px;
margin:0;
}
#colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
background:#ffd8b7; /* Left column background colour */
}
#colmid {
float:left;
width:200%;
position:relative;
left:200px;
background:#fff; /* Centre column background colour */
}
#colright {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
background:#ff9; /* Right column background colour */
}
#col1wrap {
float:right;
width:50%;
position:relative;
right:100%;
}
#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}
#col1 {
width:100%;
overflow:hidden;
}
#col2 {
float:left;
width:170px;
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
}
#col3 {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;
}
#footer {
clear:both;
float:left;
width:100%;
padding:0;
margin:0;
border-top:1px solid #000;
}
#footer p {
padding:.5em 15px;
}