Creating floating sidebars with a content area in the middle CSS - html

Question

I am having trouble getting my basic layout to work. I am new at HTML and CSS. How can I attain a 3 column setup on my website to allow for proper placing of ads along the sides?
I currently have 2 floating sidebars left and right and one content area that is not floating but there seems to be an invisible margin between the content area and the side bars.
HTML
<div class="float-left left-ad-space">
<div class="filler"></div>
</div>
<div class="float-right right-ad-space">
<div class="filler"></div>
</div>
<div class="body-wrapper">
<div class="filler">
<div style="width: 100%; margin-left: auto; margin-right: auto;">
#RenderSection("Featured", false)
</div>
<div>
#RenderBody()
</div>
</div>
</div>
CSS
body {
width: 100%;
background-color: white;
height: 1200px;
}
.body-wrapper {
width: 900px;
height: 100%;
}
.left-ad-space {
height: 500px;
width: 160px;
}
.right-ad-space {
width: 160px;
height: 500px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.filler {
width: 100%;
border-style: solid;
border-width: 3px;
border-color: blue;
height: 100%;
}

Answer 1

You need to center the middle column.
EXAMPLE HERE
.body-wrapper {
width:900px;
height:100%;
margin:0 auto;
}
Aside from that, your calculations are a bit off because of the borders.
You could use box-sizing:border-box in order to include the element's border within it's dimension calculations. Most people just apply this property to all elements:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
You would otherwise need to include this on the individual elements.

Answer 2

You can use this idea for your design. If you want more info look up html5 3 column layouts.
<div class="columns">
<div class="lcol"></div>
<div class="ccol"></div>
<div class="rcol"></div>
</div>
.colums { width:800px;} /*your wrappers width */
.lcol, .ccol, .rcol {
background: gray;
margin: 0 10px;
padding: 10px;
}
.lcol { /*left column*/
float: left;
width: 100px;
}
.ccol {/*center column*/
float: left;
width: 300px;
}
.rcol { /*right column*/
float: right;
width: 100px;
}