CSS: il modo migliore per allineare un float: sezione destra

Question

Voglio quello che ai bei vecchi tempi sarebbe un layout di tabella a due colonne. E 'per http://paulisageek.com/resume e sta lavorando perfettamente con:

.dates { 
    float:right; 
    width:171px; 
} 

ma sono sicuro che ti rompo le dimensioni su aggiornamenti (e diversi tipi di carattere, e browser, e font-dimensioni, ecc).

C'è un modo per rendere la seconda colonna autosize senza forzare una larghezza (o utilizzando javascript)? I CSS3 avranno un modo?

Answer 1

Assegna alla colonna delle date una larghezza minima e una larghezza massima anziché una larghezza fissa. Questo ti dà la flessibilità, ma assicura che il vostro progetto non si romperà:

.dates { 
    float:right; 
    min-width:171px; 
    max-width:300px; 
} 

noti che min-width e max-width non includono padding, bordi o margini.

Un'altra possibilità è effettuare le date per allineare a destra e la visualizzazione in linea:

.dates p{ 
    text-align:right; 
    display:inline; 
} 

In questo modo non sarà necessario un div separato per le date.

... Oppure, se si vuole essere super-taglio-bordo e garantire che le pause di layout in IE, è possibile utilizzare il (lettura non consigliato qui, ma vale comunque la pena) new CSS3 columns

Answer 2

Sì, è possibile. La parola chiave da cercare è colonne liquide. Ad esempio, this si occupa di interi layout ma i punti sono gli stessi.

Answer 3

Quello che hai qui è qualcosa che funziona straordinariamente bene e facilmente con le tabelle. Non solo è incredibilmente compatibile all'indietro. Nel CSS "puro" è difficile. È possibile creare una larghezza variabile delle colonne ma non entrambe. Se proprio ne hai bisogno, continua con le tabelle (indipendentemente da ciò che potrebbero dire gli zeloti della semantica dell'HTML).