Fluid layout. 2 columns. Make one get narrower before the other when the browser window is narrowed

Question

Consider the following layout:

There are 2 columns that have their min-width and max-width set (different for each one). When the user agent is narrowed, the right column starts getting narrower, while the left one remains the initial width. After the right column is at its min-width, the left one starts to get more narrow, until it is, too, at its min-width.

Is it possible to achieve this effect using CSS only? If so, how?

Answer 1

This would be possible if you use media queries.

Put a static width on the left column in your base style. Then inside a media query which becomes active at a certain screen width, eg: @media all and (max-device-width: 460px), (max-width: 460px), give it a smaller min-width.

The "certain screen width" should be the screen width at which your right column reaches its min-width.

Example here: http://jsbin.com/ivodam/1/edit