Fill remaining space with left div

Question

Can anyone tell me how to make a left div fill the remaining space, without fixing the right div size.

I want the exact opposite of the following example:

.left {float: left; border: 1px solid blue;}
.right {overflow: hidden; border: 1px solid blue;}

The right div should take only the size it needs, the left div should take all the remaining space.

Answer 1

The right div with a fixed width must float:right; then the left div must stay as it is so it can take its full available width, but since you want the right div to be fixed, you must place it first.

HTML:

<div id="parentDiv">
    <div id="rightFixedDiv"></div>
     <div id="leftDynamicDiv></div>
</div>

CSS:

#rightFixedDiv
{
   float:right; 
   border-style:solid; 
   width:100px; 
   height:200px;
}
#leftDynamicDiv
{
   border-style:solid; 
   background-color:blue; 
   overflow:hidden; 
   height:200px;
}

Check it out, fixed width of 100px: http://jsfiddle.net/dkGbd/ fixed width of 200px: http://jsfiddle.net/eESTZ/

Now if you want the opposite, place the left div first, give it a float:left;

Working example: http://jsfiddle.net/UShek/

Answer 2

Most of what you have to do is reverse the css and html order of what you did here. The floating element must always be first.

<div class="right">this is the right div</div>
<div class="left">left div</div>

Then the CSS would be

.right {
  float: right;
  background: #fef;
}
.left {
  display: block;
  background: #ffe;
}

Update: Here is the fiddle