div in div.... ma non sta dentro

[gigigi]

come da titolo... ho due div uno all'interno dell'altro.

i css son questi:
--------------------------------
#elenco_prod{
border-bottom:1px solid #515352;
border-top:1px solid #D1D2D2;
padding-top:20px;
padding-bottom: 20px;
margin:0px;
}
#proddino{
float:left;
width:140px;
background-color:#7A7E7D;
padding:5px;
margin: 5px;
border:1px solid #515352;
}
----------------------------------

nell'html sono così:
------------------------------------
<div id="elenco_prod">
<div id="proddino"></div><div id="proddino"></div><div id="proddino"></div>
</div>
-----------------------------------

la mia domanda è la seguente...
perchè "proddino" non sta bene dentro a "elenco_prod" ma se ne va piu' in basso?
per far capire bene allegoo lo stamp di cosa vedo in IE

grazie mille

[floyd46]

ciao
c'è un errore abbastanza grande quando vai scrivere nella pagina html 3 volte il <div id="proddino"></div>.
Un ID può essere inserito solo una volta in una pagina.
Al limite creati una classe e la puoi riportare quante volte vuoi.
Inoltre, non so quanto grande è il contenitore di div id="proddino", ma potrebbe essere dovuto al problema del box-model.
Floyd

[gigigi]

ma dai... puo' esserci un solo DIV con lo stesso nome per pagina?!?!
non lo sapevo!!
dici di adottare una soluzione di questo tipo?
------------------------------
<div id="elenco_prod">
<div class="proddino"></div><div class="proddino"></div><div class="proddino"></div>
</div>
------------------------------

anche così mi da lo stesso problema...
nel div contenitore avevo messo un padding top e bottom di 20px... quello bottom non lo considera? gli devo dare un'altezza precisa?

[floyd46]

può esserci UN SOLO div per pagina se è contraddistinto da uno specifico ID. E' una regola fondamentale dei CSS. In questi casi, come hai scritto tu, meglio adottare delle classi. Inoltre vorrei farti notare che se scrivi un codice del genere:

.proddino{
float:left;
width:140px;
background-color:#7A7E7D;
padding:5px;
margin: 5px;
border:1px solid #515352;
}

il tuo box misura 162px (è la regola del box model).
Come se non bastasse, IE raddoppia i margini quando ad un div flottante, sono dichiarati i margini, appunto.
Quindi... non credo dipenda dal contenitore esterno (padding top e bottom nn c'entra nulla) ma dalla misura ad esso assegnata.
Floyd

[gigigi]

ok ma quello non mi disturba ....
in orizzontale sono apposto!
è verticalmente che "proddino" non rimane dentro "elenco_prod"

hai visto l'immagine allegata?

[gigigi]

ottengo questo risultato con questo codice...
------------------------------------------------------------CSS
#elenco_prod{
display:block;
border-bottom:1px solid #515352;
border-top:1px solid #D1D2D2;
padding-top:20px;
padding-bottom: 20px;
margin:0px;
}
.proddino{
display:block;
float:left;
width:140px;
background-color:#7A7E7D;
padding:5px;
margin: 5px;
border:1px solid #515352;
}
-----------------------------------------------------------------
-------------------------------------------------------------HTML
<div id="elenco_prod">
<div class="proddino"></div><div class="proddino"></div><div class="proddino"></div>
</div>
------------------------------------------------------------------

ora proddino scende in basso oltre la fine di elenco_prod ,
come faccio a far stare i proddino all'interno preciso di elenco_prod ?

[gigigi]

rispondo a me stesso con una domanda a voi....

questa sezione che sto tentando di sistemare sarà un loop di prodotti.
è giusto il metodo che sto usando?
come markup intendo; o dovrei forse usare le liste? <ul>[*]?!

[gigigi]

un parere? un consiglio? una soluzione?

nulla e nessuno?!?!?

[Mich_]

Ci sono tre tipi di liste in (X)HTML:
<dl> liste di definizione
<ul> liste non ordinate
[list=1] liste ordinate

<ul> e [list=1] accettano all'interno il tag[*]
<dl> accetta all'interno i tag <dt> (termine da definire) e <dd> (descrizione di definizione)


Per il problema originario, non saprei dirti.
E non dici in quale browser vedi il problema.

In linea di massima, i padding sarebbero da evitare, se possibile (sono interpretati in modo diverso nei vari browser), mentre i margin sono piu` sicuri.

[gigigi]

il problema lo vedo in IE ...

quindi mi consigli di provare con la lista per risolvere il problema?