Fill the remaining space with the left div

Question

Can someone tell me how to make the left div fill the remaining space without fixing the right size of the div.

I need the exact opposite of the following example:

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

The correct div should take only the required size, the left div should take all the remaining space.

Answer 1

The correct fixed-width div should float:right; , then the left div should remain so that it can get the entire available width, but since you want the right div to be fixed, you should put 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 this out, fixed width of 100 pixels: http://jsfiddle.net/dkGbd/ fixed width of 200 pixels: http://jsfiddle.net/eESTZ/

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

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

Answer 2

Most of what you need to do is reorder the css and html of what you have done here. A floating element should always be the first.

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

Then CSS will be

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

Update: Here is the fiddle

Answer 3

I think the most efficient way is to use "display: flex", the new CSS 3 method. You can find this to learn more about this amazing display, I will benefit a lot from this .;)