problemi con allineamento dei div

[bassett87]

ciao a tutti, sono nuovo del forum e mi complimento con lo staff e gli utenti che danno regolarmente un supporto valido a chi vuole approcciarsi nella creazione dei siti web.
Io ho le basi dell'html, quindi sono ancora un novello...

dunque il mio problema è il seguente:

ho creato un div-container dentro al quale devono essere posti 3 div orizzontalmente,
all'interno di quest'ultimi sono presenti 2 div.

il problema è che i 3 div non si allineano orizzontalmente ma verticalmente, uscendo di fatto dal div container, le misure in pixel sono corrette e i 3 div hanno nei css il parametro
inline-block....
E' un problema banale ma vi ringrazio sin da subito...
questo è il codice:

css

#container{
width:792px;
height:280px;
margin:35px 78px;
padding:0px;
display:block;
}

#div1 #div2{
width:250px;
height:280px;
margin:0px 15px 0px 0px;
padding:0px;
display:inline-block;
font-size:10px;
float:none;
}

#div3{
width:250px;
height:280px;
margin:0px 0px 0px 0px;
padding:0px;
font-size:10px;
display:inline-block;
float:none;
}

QUESTI SONO I DIV ALL'INTERNO DEI 3 DIV SOPRA

#img{
width:250px;
heigh:200px;
margin:0px;
padding:0px;
display:inline-block;
}

#des{
width:230px;
height:40px;
margin:5px 0px 0px 0px;
padding:10px;
background-color:#000000;


HTML

<div id="container">
<div id="div1">
<div id="img"></div>
<div id="des"></div>
</div>

<div id="div2">
<div id="img"></div>
<div id="des"></div>
</div>

<div id="div3">
<div id="img"></div>
<div id="des"></div>
</div>
</div>

[Mich_]

Anzitutto devi correggere l'HTML.
in una pagina non ci possono essere oggetti con lo stesso ID.

L'HTML potrebbe diventare:

<div id="container">
  <div id="div1" class="riga"> 
    <div class="img">...</div>
    <div class="des">...</div>
  </div>

  <div id="div2" class="riga">
    <div class="img"></div>
    <div class="des"></div>
  </div>

  <div id="div3"  class="riga">
    <div class="img"></div>
    <div class="des"></div>
  </div>
</div>

A quel punto tutti i img devono essere floattati a sinistra, e i des potrebbero non venir flottati o venir flottati sia a dx che a sin, a seconda dell'effetto fine che si vuole.

Invece div che identificano le righe devono avere il clear alla fine.
Ad esempio:

#container {
  width:792px;
  /*height:280px;=*/
  margin:35px 78px;
  padding:0px;
}
#container .riga {
  width:250px;
  height:280px;
  margin:0px 15px 0px 0px;
  padding:0px;
  /*font-size:10px;*/
}
#container .riga:after {
  clear: both;
  .... vedi altri thread sul clear 
}

#div3{
margin:0;
}


.img{
  width:250px;
  heigh:200px;
  margin:0px;
  padding:0px;
  float: left
}

.des{
  width:230px;
  height:40px;
  margin:5px 0px 0px 0px;
  padding:10px;
  background-color:#000000;
  float: left;
}

[bassett87]

Grazie mille!! mi hai risolto molti problemi che avrei avuto con l'inline block e mi hai pure aperto le conoscenze per affrontare questi problemi