problema ad un layout: perchè?

[andropoff]

EDIT: mi scuso se qualcuno ha letto il messaggio incompleto che c'era prima, ma purtroppo ho sbagliato a cliccare ed è partito..

allora.. ho fatto un layout di questo tipo:

<div id="containter">

<div id="logo">...</div>

<div id="foto">...</div>

<div id="contenent">...</div>

<div id="footer">...</div>

</div>

all'interno del contenent ci sono una serie di DIV di numero variabile <div class="prodotti">

passiamo al CSS:

div#container
{
position:relative;
width: 770px;
margin-top:5px;
}

div#logo
{
position:relative;
background-color:#fff;
padding: 0px;
}
div#foto
{
position:relative;
border-top:5px solid #000;
border-bottom:5px solid #000;
height:230px;
}
div#contenent
{
position:relative;
}
div#footer
{
color:#000;
text-align:center;
border-top:1px solid #000000;
}
.prodotti
{
float:left;
width: 105px;
margin-right:3px;
margin-top:6px;
border:1px solid #000;
text-align: center;
color:#000000;
font-weight: bold;
}

adesso il problema è questo... se il numero di div prodotti è più di 7 e quindi date le misure uno deve andare necessariamente a capo, il footer non si attacca alla seconda riga, ma resta attaccata alla prima.. cosi il div prodotti a capo sormonta il footer, tutto questo SOLO con firefox e non con explorer. perchè?

tutto è stato validato w3c e w3c-css..

grazie a chi mi può aiutare...

[salasir]

Devi "chiudere" gli elementi float.
Dovrebbe bastare un

clear: left;  (o both)

nella definizione del footer.
In alternativa, dopo l'ultimo <div class="prodotti"> inserisci un div di pulizia:

CSS 
.clear{ clear: both; display: block; }
XHTML 
<div class="clear"></div>

[andropoff]

Originariamente inviato da salasir
Devi "chiudere" gli elementi float.
Dovrebbe bastare un

clear: left;  (o both)

nella definizione del footer.
In alternativa, dopo l'ultimo <div class="prodotti"> inserisci un div di pulizia:

CSS 
.clear{ clear: both; display: block; }
XHTML 
<div class="clear"></div>

grazie davvero... infatti io avevo creato un div di chiusura ma avevo messo un flot: none; adesso funziona perfettamente.

gentilissimo anche solo perchè ti sei letto la pappardella che ho scritto..


un ultima cosa se ti va:
non riesco a centrare la pagina, sempre con firefox:

nel css ho messo:

html,body
{
margin: 0;
padding:0;
text-align:center;
}
body
{
font-family: arial,sans-serif;
font-size: 11px;
text-align:center;
}

cosa devo mettere per far si che il mio containter sia in centro alla pagina anche per firefox?

[salasir]

Se "CONTAINER" è il div figlio di body:

div#container { margin: 5px auto; text-align: left;
         line-height: 1.05;  }