title: ie7 float div height
body: <p>i have this code
  Code:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="products_content"&gt;
          &lt;div id="products_page_header"&gt;
              &lt;div id="products_page"&gt;
                  &lt;div class="post"&gt;
                      &lt;div class="entrytext"&gt;
                          some text
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="clear"&gt;
      &lt;/div&gt;
      &lt;div id="siteinfo"&gt;
          &lt;p&gt;
              some content
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this css :</p>
  
  <p>Code:</p>
  
  <pre><code>div#container {
      margin: 0 auto;
      width: 960px;
      height: auto;
      border-left: thin solid #6b5c57;
      border-right: thin solid #6b5c57;
  }
  
  
  div#products_page_header {
      width: 960px;
      height: 50px;
      background-image: url(images/products_page_header.png);
      background-repeat: no-repeat;
      margin: 10px 0 0 0;
  }
  
  div#products_page {
      width: 950px;
      float: right;
      margin: 50px 0 0 0;
  }
  
  div.post {
      float: right;
      border: 1px solid #6b5c57;
      width: 200px;
      height: 350px;
      margin: 10px;
  }
  div#siteinfo {
      height: 280px;
      position:relative;
      background-image: url(images/footer.jpg);
  }
  </code></pre>
  
  <p>the problem is its working on all new browsers except IE7 !
  the height of products container wont work and footer div overlap it !
  what should i do ?</p>