Creating floating sidebars with a content area in the middle CSS

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.

margin issue

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%;
}

solution

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.