Div allineati

[Ale407]

Ciao a tutti, temo sia l'ennesima domanda "facile".. ma non ne vengo davvero a capo:

Ho una pagina html organizzata con i <div> nella quale vorrei avere 3 <div> allineati orizzontalmente. Da ignorante di CSS (quale sono) ho fatto in questo modo:

1. ho aperto un #conteiner:

#container{
margin: 0px auto;
width: 790px;
height: 500px;
}

2. ho inserito il primo <div>:

#barsx{
float:left;
width: 205px;
padding-top: 55px;
}

3. ho inserito il secondo <div>:

#menucontainer{
background-image: url(../images/menu-background.gif);
height: 500px;
width: 180px;
margin-left: 205px;
}

3. ho inserito il terzo <div>:

#content{
height: 390px;
width: 390px;
position: relative;
left: 390px;
top: -445px;
overflow: auto;
background-color: #F4F4F4;
border: 1px solid #B4B5B7;
padding: 15px 10px 0px 10px;
}

Cosi (con explorer) sono allineati come voglio, ma non è il modo giusto e infatti i browser non microsoft intrerpretano il layout in tutt'altro modo.

Sapete suggerirmi come procedere correttamente?
Come allineare orizzontalmente 3 <div> all'interno di un <div> che fa da container?

Grazie in anticipo!

[Mich_]

Prova cosi` (ma nonsose ho capito cosa vuoi)

#container{
  margin: 0px auto;
  width: 790px;
  height: 500px;
}
#container:after {   /* non funziona in IE */
  clear: both;
  height: 1px;
}

#barsx{
  float:left;
  width: 205px;
  padding-top: 55px;
}

#menucontainer{
  background-image: url(../images/menu-background.gif);
  height: 500px;
  width: 180px;
  float: left;
}

#content{
  float: left;
  height: 390px;
  width: 390px;
  top: -445px;           /* ???? */
  overflow: auto;
  background-color: #F4F4F4;
  border: 1px solid #B4B5B7;
  /* padding: 15px 10px 0px 10px; */
}

Nota che la somma delle larghezze e` maggiore del contenitore, per cui ho tolto il padding all'ultimo blocco.
Alla fine e` necessario un clear: per i browser standard dovrebbe bastare quanto inserito con l':after, per IE servono altri trucchi. Vedi ad esempio la pillola di fcaldera sul clearing.

[Ale407]

Grazie mille

in definitiva era il padding che faceva superare la misura del container e di coneguenza l'ultimo div si riposizionava sotto il primo per mancanza di spazio.

Banale errore di distrazione.

Grazie per l'aiuto, a presto.

Ale.

[Mich_]

Se riesci a sostituire il padding con il margin, non hai piu` i problemi con IE.
Altrimenti devi farti un "CSSxIE" che corregge le sue misure e viene inserito con un commento condizionale DOPO il CSS standard.