html - make div fill up remaining space -

i have 3 divs conatined within outer div. aligning them horizontally floating them left. , div3 float right

<div id="outer">    <div id="div1">always shows</div>   <div id="div2">always shows</div>   <div id="div3">sometimes shows</div> </div> 

div1 , div3 have fixed sizes. if div3 left out want div 2 fill remaining space. how can it?

what this? http://jsfiddle.net/steweb/elkqg/

css:

#container{     width: 100%;     float:left;     overflow:hidden; /* instead of clearfix div */ } #right{     float:right;     width:50px;     background:yellow; } #left{     float:left;     width:50px;     background:red; } #remaining{     overflow: hidden;     background:#dedede; } 

body:

<div id="container">     <div id="right">div3</div>      <div id="left">div1</div>      <div id="remaining">div2, remaining</div> </div>