CSS: Meilleure façon d'aligner un flottant à gauche: section droite

Question

Je veux ce que dans le bon vieux temps serait une disposition de table à deux colonnes. Il est pour http://paulisageek.com/resume et fonctionne parfaitement avec:

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

mais je suis sûr que je vais te casser la taille des mises à jour (et des polices différentes, et les navigateurs, et tailles de police, etc.).

Existe-t-il un moyen de rendre la deuxième colonne autosize sans forcer une largeur (ou en utilisant javascript)? CSS3 aura-t-il un moyen?

Answer 1

Donnez à vos colonnes de dates une largeur minimale et une largeur maximale au lieu d'une largeur fixe. Cela vous donne la flexibilité, mais assure votre conception ne se cassera pas:

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

Notez que ne comprend pas la largeur min et max-width espacement, les bordures ou les marges.

Une autre possibilité est de faire les dates pour aligner en ligne droite et affichage:

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

De cette façon, vous aurez pas besoin d'une div séparée pour les dates.

... Ou, si vous voulez être super-pointe et faire en sorte que vos sauts de disposition dans IE, vous pouvez utiliser le new CSS3 columns (non recommandé, mais encore la peine de lire)

Answer 2

Ouais, c'est possible. Le mot clé à rechercher est des colonnes liquides. Par exemple this traite des dispositions entières, mais les points sont les mêmes.

Answer 3

Ce que vous avez ici est quelque chose qui fonctionne extraordinairement bien et facilement avec les tables. Non seulement c'est incroyablement rétrocompatible. En CSS "pur" c'est dur. Vous pouvez faire une des colonnes de largeur variable mais pas les deux. Si vous en avez vraiment besoin, tenez-vous-en aux tableaux (sans tenir compte de ce que les zélotes HTML sémantiques pourraient dire).