css - Div to take up entire remaining width -

this question has answer here:

• css: setting width/height percentage minus pixels 10 answers

i have parent div , 2 divs inside it. first child div 50px wide , 100% height. second child div 100% height , take rest of width ( 100% - 50px ) how do that?

here fiddle i've created: http://jsfiddle.net/mugty/ want blue div (right ) occupy rest of grey container completely.

<div class="parent">     <div class="left"></div>     <div class="right"></div> </div> 

do mean this?

<div id="left"> </div> <div id="right"> </div> 

css

html, body {     height: 100%; }  #left {     width:200px;     float:left;     background: #f00;     height: 100%; } #right {     margin-left: 200px;     background: #0f0;     height: 100%; } 

update:

you can use calc() property in css3, ease process like

html, body {     height: 100%; }  #left {     width:200px;     float:left;     background: #f00;     height: 100%; }  #right {     float: left;     background: #0f0;     height: 100%;     width: calc(100% - 200px); /* negate fixed width element value 100% */ } 

demo 2