CSS: mejor forma de alinear un flotador a la izquierda: sección derecha

Question

Quiero lo que en los viejos tiempos sería un diseño de tabla de dos columnas. Es para http://paulisageek.com/resume y está trabajando perfectamente con:

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

pero estoy seguro que voy a romper los tamaños de las actualizaciones (y diferentes tipos de letra, y los navegadores y tamaños de fuente, etc).

¿Hay una manera de hacer la segunda columna de tamaño automático, sin forzar una anchura (o usando javascript)? ¿CSS3 tendrá una manera?

Answer 1

Dé su columna de fechas de un min-anchura y un máximo de ancho en lugar de un ancho fijo. Esto le da flexibilidad, pero asegura que su diseño no se romperá:

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

Tenga en cuenta que min-width y max-anchura no incluyen el relleno, bordes o márgenes.

Otra posibilidad es hacer las fechas para alinear a la derecha y la visualización incorporada:

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

De esta manera no se necesita un div por separado para las fechas.

... O, si quieres ser súper vanguardista y asegurarse de que sus descansos de diseño en IE, se puede utilizar el new CSS3 columns (no se recomienda aquí, pero aún así vale la pena leer)

Answer 2

Sí, es posible. La palabra clave para buscar es columnas líquidas. Por ejemplo, this se ocupa de diseños completos, pero los puntos son los mismos.

Answer 3

Lo que tenemos aquí es algo que funciona extraordinariamente bien y fácilmente con tablas. No solo eso es increíblemente compatible con versiones anteriores. En CSS "puro" es difícil. Puede hacer que una de las columnas tenga ancho variable, pero no ambas. Si realmente lo necesita, quédese con las tablas (independientemente de lo que digan los fanáticos semánticos de HTML).