Hi,

I've been looking around the web for a solution to my problem but couldn't find anything suitable.

I have several <div> one underneath each other. In one of the <div> (called containerProducts), I have 6 other <div> that have float:left, because I want them to be aligned horizontally.
Weirdly Firefox acts as if the <div> "containerProducts" was empty.

It works fine if I don't put float:left.
I tried playing with position:relative and display:bloc, but nothing works.... or I'm doing something wrong :(

Anyway here is the html code :
[CODE]<div style="width:740px;">
<div class="titreProduits"><img src="images/products/titre_produits.jpg" /></div>
<div class="textPresentation">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vulputate. Donec feugiat, enim et eleifend sagittis, nunc felis tristique mi, vitae pellentesque risus enim a massa. </div>
<div class="containerProducts">
<div class="produit">
<div class="produitPhoto"><img src="images/products/bagel.jpg" /></div>
<div class="productType">NATURE'S GRAIN LITE</div>
<div class="productName">BAGEL</div>
</div>
<div class="produit">
<div class="produitPhoto"><img src="images/products/muffin.jpg" /></div>
<div class="productType">NATURE'S GRAIN LITE</div>
<div class="productName">ENGLISH MUFFIN</div>
</div>
<div class="produit">
<div class="produitPhoto"><img src="images/products/bakers.jpg" /></div>
<div class="productType">NATURE'S GRAIN LITE</div>
<div class="productName">PREMIER BAKERS</div>
</div>
<div class="produit">
<div class="produitPhoto"><img src="images/products/bagel.jpg" /></div>
<div class="productType">NATURE'S GRAIN LITE</div>
<div class="productName">BAGEL</div>
</div>
<div class="produit">
<div class="produitPhoto"><img src="images/products/muffin.jpg" /></div>
<div class="productType">NATURE'S GRAIN LITE</div>
<div class="productName">ENGLISH MUFFIN</div>
</div>
<div class="produit">
<div class="produitPhoto"><img src="images/products/bakers.jpg" /></div>
<div class="productType">NATURE'S GRAIN LITE</div>
<div class="productName">PREMIER BAKERS</div>
</div>
</div>
<div class="containerFooter">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="25%" class="footer"><b>PREMIER BAKERS<br />
10491 West Battaglia Road<br />
Casa Grande, Arizona 85222</b></td>
<td width="44%" class="footer"><img src="images/logos.jpg" width="281" height="41" /></td>
<td width="31%"><div class="fsb2"><br /><br /><br /><br />A Fresh Start Bakeries Company</div></td>
</tr>
</table>
</div>
</div>[/CODE]


And here is the CSS:
[CODE]div.titreProduits{
padding: 15px 0px 0px 34px;
}

div.textPresentation{
width: 422px;
margin: 24px 0px 0px 34px;
}

div.containerProducts{
width: 740px;
float: none;
}

div.produit{
line-height: 170px;
width: 185px;
height: 170px;
margin: 44px 0px 0px 44px;
float: left;
display: inline;
}

div.produitPhoto{
width: 185px;
height: 139px;
background-image: url(../images/products/cadre_produit.jpg);
}

div.produit img{
margin: 7px 0px 0px 30px;
}

div.containerFooter{
width: 740px;
margin: 30px 0px 0px 0px;
}[/CODE]

Thanks a lot