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.