divを含むCSSコンテンツがオーバーフローしています

Question

現在、DIVが含まれているDIVには問題があります。 （一番下の3製品）下の画像を参照してください：

ページのすべてのボディのコンテンツは#contentのDIV内に保持されています

div#content { 
    width: 960px; 
    float: left; 
    background-image: url("../img/contentBg.png"); 
    background-repeat: repeat; 
    margin-top: 10px; 
    line-height: 1.8em; 
    border-top: 8px solid #5E88A2; 
    padding: 10px 15px 10px 15px; 
} 

そして、ここでは、CSSのためにあります#content divの内の製品の箱：

：

.upper { 
    text-transform: uppercase; 
} 
.center { 
    text-align: center; 
} 
div#products { 
    float: left; 
    width: 100%; 
    margin-bottom: 25px; 
} 
div.productContainer { 
    float: left; 
    width: 265px; 
    font-size: 1em; 
    margin-left: 50px; 
    height: 200px; 
    padding-top: 25px; 
    text-align: right; 
} 

div.product { 
    float: left; 
    width: 200px; 
} 
div.product p { 
} 
div.product a { 
    display: block; 
} 
div.product img { 
    float: left; 
} 
div.product img:hover { 
    opacity: 0.8; 
    filter: alpha(opacity = 80); 
} 
div.transparent { 
    opacity: 0.8; 
    filter: alpha(opacity = 80); 
} 

そして、ここでは、ボックスのHTMLです

 <div class="productContainer"> 
      <div class="product"> 
       <h2 class="upper center">A2 Print</h2> 

       <a href='../edit/?productId=5&amp;align=v' class='upper'>     <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a> 
       <p class="upper">16.5 inches x 23.4 inches<br /><strong>&pound;15.99</strong></p> 
       <p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span>     </em></p> 

       <p><a href='../edit/?productId=5&amp;align=v' class='upper'><span>Select</span></a></p>     
      </div> 

     </div> 

     <div class="productContainer"> 
      <div class="product transparent"> 
       <h2 class="upper center">A1 Print</h2> 
       <a href='../edit/?productId=11&amp;align=v' class='upper'>     <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a> 
       <p class="upper">23.4 inches x 33.1 inches<br /><strong>&pound;19.99</strong></p> 
       <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span>     </em></p> 


       <p><a href='../edit/?productId=11&amp;align=v' class='upper'><span>Select</span></a></p>      
      </div> 
     </div> 

     <div class="productContainer"> 
      <div class="product transparent"> 
       <h2 class="upper center">Poster Print (60cm x 80cm)</h2> 
       <a href='../edit/?productId=12&amp;align=v' class='upper'>     <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a> 
       <p class="upper">23.6 inches x 31.5 inches<br /><strong>&pound;13.95</strong></p> 

       <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span>     </em></p> 

       <p><a href='../edit/?productId=12&amp;align=v' class='upper'><span>Select</span></a></p>      
      </div> 
     </div> 

これらのDIVが重複する原因は何ですか？私が望むのは、#container div内にすべてのボックスが予想どおりに収まるようにすることです。それは私を夢中にさせている！

乾杯

Answer 1

にあなたはフッター

clear:both; 

に設定しようとしました。また、多くの人が使用して何かをclearfixと呼ばれる

overflow:hidden; 

Answer 2

オーバーフローを追加：auto;あなたのコンテンツのdiv CSS :)

Answer 3

#contentに設定します。ここにコードがあります：

.clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
} 
.clearfix {display:inline-block;} 
/* Hide from IE Mac \*/ 
    .clearfix {display:block;} 
/* End hide from IE Mac */ 

これを使用するには、クラスclearfixをコンテナに追加します。あなたはおそらく、すべての "productContainer"を含んでいるdivにそれを追加したいと思うでしょう