How do I correctly position 2 divs around main wrapper div

Question

I am trying to code layout of my website to display ads on both sides of search engine div but for some reason right div is not aligned to top. Any idea why is it like that?

I tried on jsfiddle.net - http://jsfiddle.net/pbutrynowski/dThwa/1/

<div id="ads-wrapper">
  <div id="ads-left-pane">
    Left ad goes here - aligned to top of #wrapper div
  </div>
  <div id="wrapper">
    Content goes here
  </div>
  <div id="ads-right-pane">
    Right ads goes here - should be aligned to top od #wrapper div
  </div>
</div>


#ads-wrapper {
  width: 1360px;
  margin: 0;
}

#ads-left-pane {
  width: 199px;
  background-color: #f4f4f4;
  float: left;
}

#ads-right-pane {
  width: 199px;
  background-color: #f4f4f4;
  float: right;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  min-height: 200px;
}

This is how I would like to have it - http://awesomescreenshot.com/0812mobba0

Thanks for any ideas

Answer 1

There were a few simple errors in your code. Try this instead:

<div id="ads-wrapper">
    <div id="ads-left-pane">
         Left
    </div>
    <div id="wrapper">
        Content goes here
    </div>
    <div id="ads-right-pane">
        Right
    </div>
    <div style="clear:both;"></div>
</div>

Also, I suggest making a "clear" class and applying that to a clear div. It's a tiny step, but it can save you some typing in the long run.

.clear{clear:both;}

<div class="clear"></div>

Answer 2

There are a couple of errors in your code (one of your <div> ID's included the '#' character), but besides those issues, you will probably have better luck making your <div> elements have display: inline-block' styling. It usually ends up being much more rigid and easy to make changes to compared to using float .

Here is an updated fiddle that can get you started in that direction.