Allineare più div dentro a un contenitore

[oRpo]

Ciao,
avrei la necessita di allineare in modo fluido dei div contenuti in un contenitore div.

Ecco il codice:

<div id="contenitore">
 <div style="float:left">a</div> 
 <div style="float:left">b</div> 
 <div style="float:left">c</div>
 <div style="float:left">d</div>
</div> 

Come di consueto questa configurazione produce un allineamento del tipo:




Vorrei fare in modo che i 4 div si distribuiscano occupando tutto lo spazio interno e che abbiano una distanza tra loro omogenea:




Per fluido intendo che se dovesse verificarsi che il div rosso si allunghi, allora le distanze dei div interni devono aumentare rispettando la proporzione (quindi non usare valori in px per i margini).


Grazie in anticipo per le risposte!

[simotenax]

io quando ho questo problema uso scriptini js ma non credo sia quello che cerchi...

A primo impatto mi viene in mente solo che potresti togliere il float dai div e metterli in display:inline e dare al padre text-align:justify solo che mi fa venire i brividi come soluzione.. oppure potresti provare qualche soluzione con il display:inline-block

[oRpo]

ciao,
grazie per la risposta!
Non penso di scrivere del codice javascipt che mi legga la lunghezza del div contenitore e di conseguenza mi imposti una distanza appropriata per i div interni.
Anche se ho già caricato jquery, ma non è mia abitudine usare javascript per impostare il layout.

A queto punto penso di scomodare le tabelle....

[Mich_]

Quegli spazi possono venir sistemati dai margini automatici.
Che pero` non agiscono correttamente se i blocchi sono affiancati con i float (almeno nelle mie esperienze).

Quindi dovrebbe essere:

CONTENITORE {
  width: 100%;     /* deve essere definita la larghezza del suo contenitore */
  text-align: justify;
}
TUTTI_GLI_OGGETTI_INTERNI {
  margin 0 0 0 auto;
  width: ...;          /* deve essere definita */
}
PRIMO_OGGETTO_INTERNO {
  margin: 0;
}

E questo e` valido se gli oggetti sono di tipo inline. Quindi andrebbe bene per immagini.

Pero` se gli oggetti sono dei <div> (o comunque di tipo block) allora devi dare un float a tutti, e questo li sposta uno contro l'altro, e in molti browser il margine automatico non ha effetto.

Dovrebbe esserci qualcosa nei CSS3, che pero` non sono ancora implementati nei brwoser.