html - One column left and one center -

i've been trying make page contains column of 330px width @ left , other column of 670px max-width centered @ remaining width of page. of course if screen width small fit 1000px, second column resized. how do that?

this current css code:

#left {    float:left;    width:330px; } #right {    ??? } 

you can without calc or other nasty overly modern hacking. following should work fine in ie7, not sure ie6 , respect margin:0 auto in nested elements work:

html

<div id="layout">     <div id="leftcolumn">         test     </div>     <div id="remainder">         <div id="rightcolumn">             test         </div>     </div>     </div> 

css

div {     color:white;     height:400px;       text-align:center; } #leftcolumn {     background:red;     float:left;     width:120px; } #remainder {     margin-left:120px; } #rightcolumn {        width:100%;     margin:0 auto;     max-width:300px;     background:green; } 

fiddle supplied.