struttura tabellare solo con i div

[futuron]

Ciao a tutti. Devo disporre dei piccoli box testuali su due colonne. Vorrei che scorressero verso il basso in questo modo: div1 a sinistra, div2 a destra, div3 a sinistra, div4 a destra, ecc. ecc. e così via. C'è un modo di farlo con i css invece di usare le celle delle tabelle? Naturalmente un metodo che mi eviti di chiudere le coppie di div in un ulteriore div che simula la riga...

Grazie

[salasir]

Qualcosa del genere

CSS 
.box { float:left; width: 48%; }
.clearer { clear: left/both; }

(X)HTML 
<div class="box">               Prima coppia
bla bla bla
</div>
<div class="box">
bla bla bla
</div>

<div class="box clearer">     seconda coppia
bla bla bla
</div>
<div class="box">
bla bla bla
</div>
....

[Mich_]

Si puo` fare piu` semplice.
HTML:

<div id="contenitore">
  <div class="box">uno</div>
  <div class="box">due</div>
  <div class="box">tre</div>
  <div class="box">qua</div>
  ...
</div>

CSS:

.box { 
  float:left; 
  width: 48%; 
  height: 100px; /* oppure 20em, comunque un valore fisso */
  margin: ??px; /* se serve, diminuendo corrispondentemente il width */
}

per il browser IE, occorre applicare l'hack per dare un valore fisso all'altezza.

[futuron]

Ok grazie per la risposta. Finora è senz'altro la migliore soluzione anche se speravo di risolvere senza introdurre una ulteriore class (cleaner). Purtroppo sembra inevitabile dato che se pure metto i box inline e se pure definisco la larghezza del container dei box e la larghezza dei box stessi, questi si allineano come vorrei solo nel caso in cui i box sono di altezze perfettamente identiche, in caso contrario si crea un vuoto sotto al box più alto perchè il box della riga inferiore che dovrebbe allinearsi a sinistra si piazza a destra.
Comunque grazie così è meglio di introdurre un div che "simula la riga"

[futuron]

Non avevo letto la risposta di Mich. Provo subito...

[salasir]

Originariamente inviato da Mich_
Si puo` fare piu` semplice.
...

Certo, predisponendo div ad altezza fissa. Ma se fossero di altezza variabile? Non sarebbe comunque necessario l'utilizzo del clear soprattutto se il box di dx è più corto di quello di sx?

[futuron]

E' proprio così purtroppo i box sono ad altezza variabile. Resta la soluzione del "cleaner"

[Mich_]

C'e` anche un'altra soluzione per blocchi di altezza diversa:

HTML:
<div id="contenitore">
  <div class="box">uno</div>
  <div class="box">due</div>
  <hr />
  <div class="box">tre</div>
  <div class="box">qua</div>
  <hr />
  ...
</div>


CSS:
.box { 
  float:left; 
  width: 48%; 
  height: 100px; /* oppure 20em, comunque un valore fisso */
  margin: ??px; /* se serve, diminuendo corrispondentemente il width */
}
hr { 
  height: 1px;
  clear: both;
  width: 100%;
  color: transparent; /* o colore uguale allo sfondo */
  font-size: 1px; /* hack per IE */
}

Qualcuno preferisce usare
al posto di <hr> (con CSS leggermente diverso).

[futuron]

Grazie ancora Mich
ma credo che per i miei scopi attuali la soluzione più semplice sia ancora introdurre una classe cleaner

[Another-Life]

Originariamente inviato da Mich_
Si puo` fare piu` semplice.
HTML:

<div id="contenitore">
  <div class="box">uno</div>
  <div class="box">due</div>
  <div class="box">tre</div>
  <div class="box">qua</div>
  ...
</div>

CSS:

.box { 
  float:left; 
  width: 48%; 
  height: 100px; /* oppure 20em, comunque un valore fisso */
  margin: ??px; /* se serve, diminuendo corrispondentemente il width */
}

per il browser IE, occorre applicare l'hack per dare un valore fisso all'altezza.

In questo modo tutti i box selezionati tramite Css hanno un allineamento verso sinistra.....il che non corrisponde alle richieste dell'utente.