One column floated to the left and other fill the rest of page

Question

The basic idea is to have one div floated to the left with static width and have the another floated to the right filling with its width the rest of the page. How can I achive this ?

So far I have used in css something like this:

width: calc( 100% - 325px );

but I am looking for the best cross-browser solution.

Answer 1

Just make left to float: left and the rest to overflow: hidden like this:

.left {float: left; width: 200px;}
.full {overflow: hidden; width: auto;}

http://jsfiddle.net/Riskbreaker/DdaPs/

You can also make them even by using display: table.....but you question was the one above.