How to change css stylesheets and add images to left and right of main content

[Jay76]

Hi there,

I am looking to get some advice on adding images (banners) to my website on the home page, I currently have main content which is centered which leaves a space on the left hand side and a space on the right hand side.

I wish to add some ad banners in these spaces, I have tried adding some text to see if I can get it to go to the far left of the main content but it will only line up to where the main content text starts.

Do I need to add more to the css stylesheet so I can add the banner images to the left and right.

This is the current css I have;



@charset "UTF-8";
* {
margin:0;
}
body, html {
height:100%;
text-align: center;
background-image: url(../images/bg2.gif);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
width:950px;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
#header {
height: 43px;
width: 950px;
margin:0 auto;
padding-top: 3px;
}
#logo {
background-image: url(../images/logo.gif);
height: 136px;
width: 950px;
margin: 0 auto;
text-align: left;
padding-top: 15px;
background-repeat: no-repeat;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 9px;
text-indent: 328px;
}
#body_copy {
width: 450px;
margin-left: 25px;
position: absolute;
}
#pricelist {
position: relative;
left: 475px;
top: 0px;
margin-bottom: -78px;
background-color: #0A1C55;
width: 450px;
}
#contentwrapper {
width: 950px;
text-align: left;
margin: 0 auto;
}
.push {
height: 200px;
}
#footer {
height: 200px;
color: #FFFFFF;
background-color: #000000;
}
#footerheader {
height: 78px;
background-image: url(../images/footer-shadow.jpg);
background-repeat: repeat-x;
}
#foot_info {
background-color: #003399;
height: 50px;
text-align: center;
}
#foot_info p {
font-size: 20px;
width: 950px;
margin:0 auto;
padding-left: 20px;
padding-top: 10px;
}
#footbase {
margin:0 auto;
padding-left: 35px;
padding-top: 0px;
width: 440px;
position: absolute;
text-align: left;
font-size: 12px;
line-height: 2;
}
#footerd {
width: 950px;
margin: 0 auto;
}
#affiliate {
width: 475px;
float: right;
margin-top: 5px;
}
#contentwrapper2 {
width: 900px;
text-align: left;
margin: 0 auto;
}
#contact {
bottom: 0px;
margin-bottom: -78px;
position: relative;
right: 0px;
left: 338px;
width: 612px;
}
#pricelist2 {
width: 450px;
position: absolute;
margin-left: 25px;
margin-bottom: -78px;
}
#computerimages {
background-image: url(../images/PC_images.jpg);
height: 148px;
width: 450px;
background-repeat: no-repeat;
}
ul#news /* Listen */

img {
border: 1px solid #ccc;
padding: 4px;
margin-left: 30px;
}
ul#news li {
list-style-type: none;
margin-left: -30px;
}
#bestseller {
background-image: url(../images/bestseller-stamp.png);
height: 115px;
width: 115px;
background-color: #1039C4;
border: 0px;
}
#facebook a {
background-image: url(../images/Facebook_icon.png);
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
display: block;
background-position: 0 0;
background-repeat: no-repeat;
}
#facebook a:hover {
background-image: url(../images/Facebook_icon.png);
background-position: 0px -30px;
background-repeat: no-repeat;
}
#twitter a {
background-image: url(../images/twitter_logo.png);
width: 30px;
height: 30px;
float: left;
background-position: 0 0;
}
#twitter a:hover {
background-image: url(../images/twitter_logo.png);
width: 30px;
height: 30px;
float: left;
background-position: 0 -30px;
}
#contact_copy {
width: 338px;
line-height: normal;
position: absolute;
float: left;
}
#contact_copy ul {
line-height: 1.5;
padding-bottom: 10px;
font-size: 14px;
list-style-type: circle;
padding-left: 15px;
}
#contact_copy h4 {
line-height: 1;
padding: 10px 0;
}


Also if I add a new css value do I have to add a link here on my index.html



</script>
<link href="css/PCstyles.css" rel="stylesheet" type="text/css" />
<link href="css/PCcopy.css" rel="stylesheet" type="text/css" />
<link href="css/box.css" rel="stylesheet" type="text/css" />
<link href="css/glossytabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">


Please excuse me as I did not build my website but wishing to learn to do stuff on my website, really appreciate any help on this guys :)