CSS: Best way to left align a float:right section

Question

I want what in the good old days would be a two-column table layout. It's for http://paulisageek.com/resume and is working perfectly with:

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

but I'm sure I'll break the sizes on updates (and different fonts, and browsers, and font-sizes, etc).

Is there a way to make the second column autosize without forcing a width (or using javascript)? Will CSS3 have a way?

Answer 1

Give your dates column a min-width and a max-width instead of a fixed width. This gives you flexibility but ensures your design won't break:

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

Note that min-width and max-width do not include padding, borders, or margins.

Another possibility is make the dates to align right and display inline:

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

This way you won't need a separate div for the dates.

...Or, if you want to be super-cutting-edge and ensure that your layout breaks in IE, you can use the new CSS3 columns (not recommended here, but still worth reading)