Positioning adverts div element between ordered div elements within one class

I've got three div elements within one class, which in html document it looks like that:

<div class="content">
  <div id="content_head">
    <!--CONTENT HEAD CODE-->
  </div>
  <div id="between_ads">
    <!-- ADS HERE -->
  </div>
  <div id="content_middle">
    <!--CONTENT MIDDLE CODE-->
  </div>
</div>

And css code for these:

.content
{
  position: relative;
  width: 75%;
  float: left;
  left: -52px;
  margin: 5px 0 10px 0;
  border-right: 1px solid #D9D9D9;
}

.content #content_head
{
  /*position: relative;*/
  width: 100%;
  float: left;
  border-bottom: 1px solid #D9D9D9;
}开发者_StackOverflow社区

.content #content_middle
{
  /*position: relative;*/
  width: 100%;
  float: left;
  margin: 5px 0 0 0;
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
}

/*BETWEEN ADVERTS*/
.content #between_ads
{
  position: static;
  width: 100%;/*737px;*/
  height: 10px;
  /*margin: 302px 0 0 -17px;*/
  margin: auto;
  padding: 0;
  background: #000;
}
/*BETWEEN ADVERTS*/

The problem is, that resulted code for BETWEEN ADVERTS looks like this: http://i.stack.imgur.com/ZU2FD.png - black bar over window "Polecane" that's highlighted in blue - but this div element should be placed here: http://i.stack.imgur.com/ww0Ko.png - where is the yellow highlight.

Setting .content to position: absolute and rest to relative brakes totally the layout of .content class. I'm quite new to html and css and still not everything understand. Cheers

---

Try taking out the position and float of all your divs. Divs naturally like to be sitting one on top of another so adding positioning css disrupts it I would think.