Pourquoi mes blocs INLINE se supperpose, je ne le veux pas.

Bonjour,



Je ne comprends pas pourquoi mes blocs DIV inline se superposent :
http://7up.free.fr/obtenu.jpg

je voudrais qu'ils se mettent l'un à côté de l'autre, comme ça :
http://7up.free.fr/voulu.jpg







Ma CSS est là suivante :

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

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

Bonjour,

Il me semble que le résultat serait plus efficace avec un float:left au lieu des display:inline. Le "inline" mélangé avec des width et height n'est pas toujours bien compris par les navigateurs. (Je parle d'expérience, mais un avis plus rationnel devrait intervenir