CSS contenu débordant div contenant

Actuellement un problème avec des DIVs qui se chevauchent leur contenant des DIVs. Voir l'image ci-dessous (les 3 produits en bas):

Tout le contenu du corps de la page est tenue au sein de l' #DIV du contenu:

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;
}

Et voici le CSS pour le produit des boîtes à l'intérieur de la #div du contenu:

.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);
}

Et voici le code HTML pour les cases:

        <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>

Aucune idée de ce que pourrait être la cause de ces DIVs à se chevauchent? Ce que j'aimerais c'est pour toutes les cases pour s'adapter à l'intérieur de la #div conteneur comme prévu. C'est me rend fou!

Acclamations

InformationsquelleAutor kaese | 2011-01-17

css html

12

Avez-vous essayez de définir le pied de page
```
clear:both;
```
Aussi, défini pour le #contenu
```
overflow:hidden;
```
- Grâce steweb -- adjonction, l'a résolu: ajout overflow:hidden; à div#produits et réglage de la div.productContainer à hauteur de:auto; Cheers!
- Après avoir essayé de fixer une mise en page avec un 100% de la hauteur (comme ci-dessus ex) et le débordement d'un dynamique ajouté la liste, c'était la seule solution qui a marché parmi les dizaines que j'ai essayé sur de la SORTE. Merci bien monsieur! Je comprends pourquoi clear:both fonctionne, mais je voudrais bien savoir pourquoi overflow:hidden travaille pour le div du contenu tout en ne cachant pas la réelle texte débordant de l'enfant div. CSS si complexe :/
InformationsquelleAutor stecb
2

Ajouter overflow: auto; dans votre contenu div CSS 🙂
- wouldnt que d'ajouter une barre de défilement dans le contenu de la div? À l'aide de overflow:hidden est probablement une meilleure idée.
InformationsquelleAutor benhowdle89
2

Quelque chose de beaucoup de gens utilisent est appelé clearfix. voici le code:
```
.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 */
```
À utiliser il vous suffit d'ajouter la classe clearfix dans le récipient. Vous voudrez probablement ajouter à tout ce div contenant tous les "productContainer"

InformationsquelleAutor jsweazy

Vous devez vous connecter pour publier un commentaire.