Bonjour,

Je ne comprends pas pourquoi mes blocs DIV inline se superposent :



je voudrais qu'ils se mettent l'un à côté de l'autre, comme ça :



Ma CSS est là suivante :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.bloc_produit {
 display:inline;
 width:244px;
 height:90px;  
}
.bloc_produit_image {
 display:inline;
 width:107px;
 height:90px;
 float:left;
}
.bloc_produit_details { 
 display:inline;
 width:137px;
 height:90px;
 vertical-align:top;
 text-align:left;
 overflow:hidden
}
.bloc_produit_nom {
 display:block;
 width:137px;
 height:45px;
}
.bloc_produit_btn {
 display:block;
 width:137px;
 height:45px;
}
quelqu'un voit-il mon erreur ?

voilà le code HTML d'appel :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div class="bloc_produit">
            <div class="bloc_produit_image">
                <img src="../../gfx/catalogue/exemple_pdoduit.gif">
            </div>
            <div class="bloc_produit_details">
                <div class="bloc_produit_nom">
                    &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                </div>
                <div class="bloc_produit_btn">
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                </div>
            </div>
        </div>
j'ai beau cherché, je ne vois rien d'évident.

pouvez-vous m'aider s'il vous plaît ?