Impostare correttamente dei div in una larghezza fissa

[Gas75]

Salve.
Vorrei convertire una tabella in una combinazione di div, anche per risolvere un certo problema che andrò a illustrare tra poco.
La tabella attuale ha una larghezza fissa ed è composta da 2 colonne di uguale larghezza, tranne per le prime 5 righe dove utilizzo il

colspan="2".

Tutte le celle contengono un'immagine, del testo di 4 tipi diversi (titolo, testo, sottotitolo, link).
Ora io vorrei conservare questa impostazione, quindi pensavo a un ID contenitore che fissasse soltanto la larghezza della "ex tabella", a due classi che definissero i 5 div a tutta riga e tutti gli altri affiancati a due a due, e a quante classi occorrano per gestire i suddetti tipi di testo. Credo non ci siano problemi nell'usare div "annidati", ma vorrei ridurre al minimo il numero delle classi...
Ma quello che vorrei soprattutto risolvere coi CSS è un problema connesso all'inserimento di una nuova "cella" nell'attuale tabella, poiché essa la inserisco, per quanto riguarda le righe a 2 colonne, secondo l'ordine alfabetico del titolo, con conseguente fastidio di dover "scalare" di un posto le varie celle successive alla nuova, spostando i vari tag... Con CSS, invece, spero che il semplice inserimento nel codice del div nella posizione giusta, faccia "scalare" in automatico i div successivi, avendo definito un ID per la larghezza del contenitore, che se riesce a impostarmi 40 div su due colonne equamente divise, non abbia problemi con 41 div, se il 41° capita per esempio al 9° posto in ordine alfabetico...
Ovviamente io a mano inserirei un div "vuoto" per terminare l'ultima riga se resta un div disaccoppiato...

Posso ottenere questo risultato?
Posso definire i 4 tipi di testo nell'ID contenitore, senza doverlo ripetere nelle classi contenute?

[Gas75]

Up.

[Prill]

Posso ottenere questo risultato?

Un div contenitore generale, poi un secondo div che contiene i 5 affiancati, poi un altro div che contiene tutti gli altri, pure loro flottanti, che andranno a capo in automatico.

Ovviamente io a mano inserirei un div "vuoto" per terminare l'ultima riga se resta un div disaccoppiato...

non sarebbe neanche necessario

Posso definire i 4 tipi di testo nell'ID contenitore, senza doverlo ripetere nelle classi contenute?

Non è molto chiara la domanda

[ac_socmel]

tieni presente che i div hanno sempre larghezza "a tutta riga" a meno che non gli si dica diversamente
per quelli accoppiati ti basta una classe e un paio di regole css
tipo:

.tuo-div {
  background: #00FFFF;
  float: left;
  clear: left;
  height: 100px;
  width: 48%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.tuo-div:nth-of-type(even) {
  float: right;
  margin-right: 0%;
  margin-left: 2%;
}

edit: anticipato
sei in buone mani

[Gas75]

Il mio problema è che può capitare che un div destro diventi sinistro perché ne devo inserire uno nuovo, tipo da così:
1a 1b
2a 2b
3a 3b
...
a così:
1a 1b
2a 2a' (aggiunto)
2b 3a
3b...

Mi servirebbe cioè una maniera affinché ogni div "interno" al contenitore, occupasse sempre mezza larghezza, andando a capo se lo spazio è finito... e senza dover ovviamente cambiare la classe del div.
Cmq farò delle prove partendo dai vostri suggerimenti.

Non è molto chiara la domanda

Mi riferivo alle proprietà "ereditate". In pratica se definisco nel contenitore la formattazione del testo, poi non occorre ripeterlo nei div contenuti (essendo gli stessi), giusto?

Intanto grazie.

[Prill]

C'è bisogno sostanzialmente di tre regole, oltre a quella per il contenitore generale

css:

.cinque div {
float:left;
width:20%; /* o poco meno, o valori in pixel, o margini o padding che però sarebbe meglio impostare sui contenuti interni per evitare troppi calcoli e a capo indesiderati in caso si zummi col browser */
}
.due  {
clear:left;
width:100%;
}
.due div {
float:left;
width:50%; /* o poco meno, o valori in pixel */
}


html

<div class="cinque">
 <div>uno</div>
 <div>due</div>
 <div>tre</div>
 <div>quattro</div>
 <div>cinque</div>
</div>

<div class="due">
 <div>uno</div>
 <div>due</div>
 <div>tre</div>
 <div>quattro</div>
 <div>cinque</div>
 <div>sei</div>
</div>

Sì, la formattazione del testo può andare nel contenitore generale

[Gas75]

Ok, il codice mi è chiaro... ma forse ho esposto male una parte del problema: i primi 5 div non sono affiancati su 5 colonne, ma occupano per intero 5 righe. Quindi penso che il width: 20% vada portato a 100%...

Generalmente definisco i contenitori in pixel e i contenuti in percentuali, non dovrei avere problemi di calcoli e i visitatori di visualizzazione.

[Prill]

i primi 5 div non sono affiancati su 5 colonne, ma occupano per intero 5 righe. Quindi penso che il width: 20% vada portato a 100%...

avevo capito male io,sì, la larghezza sarà pari al 100% (puoi anche non indicarla), nessun float per quei div e puoi cancellare tutta la regola

[Gas75]

Sarà che sto operando nei ritagli di tempo, ma sto avendo tre problemini...
1) mi va a capo a ogni div, ignorando il 50% di larghezza rispetto al contenitore...
2) voglio centrare il contenitore nella pagina (a qualunque risoluzione) ma il contenuto dev'essere giustificato, invece mi mette tutto centrato.
3) i bordi definiti per il contenitore vengono ignorati.

Questo è il codice che sto usando: "tabella" è il contenitore, "doppia" è la scheda a due colonne, "scheda" è la scheda semplice a una colonna...

#tabella		{ font-family: Arial,Helvetica; color: #ffffff; font-size:10pt; width: 952px; border: 2px solid #ff8800; padding: 3px; spacing: 1px; float: center; }
.doppia			{ clear: left; text-align: justify; border: 0px; cellpadding: 0px; cellspacing: 0px; float: left; }
.scheda			{ float: left; width: 50%; text-align: justify; border: 0px; cellpadding: 0px; cellspacing: 0px; }

[Gas75]

Sono riuscito ad avere i div affiancati due a due, ad avere il testo giustificato, ma viene ignorata la dimensione del contenitore (va come se avessi messo width: 100%), e la definizione dei bordi.