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

Yup, it's possible. The keyword to search for is liquid columns. For example this deals with whole layouts but the points are the same.

Answer 2

What you've got here is something that works extraordinarily well and easily with tables. Not only that it's incredibly backwards compatible. In "pure" CSS it's hard. You can make one of the columns variable width but not both. If you really need that, stick with tables (irrespective of what the semantic HTML zealots might say).

Answer 3

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)