Question

I have a layout requirement whereby the right column needs to be fixed width and the left column should span whatever width is available.

I understand that I can remove the width and float from the left column and that should make it take up entire space available.

Here is what I have

<div style="height:300px;border:1px solid red;padding:10px;">
    <div style="height:200px;border:1px solid red;margin-right:150px;">
        this should take all width
    </div>
    <div style="height:200px;border:1px solid green;float:right;width:120px;">
        this is right bar with fixed width
    </div>    
</div>

Any ideas?

Answer 1

Your code is correct. Just move the floated element up:

<div style="height:300px;border:1px solid red;padding:10px;">
    <div style="height:200px;border:1px solid green;float:right;width:120px;">
        this is right bar with fixed width
    </div>  
    <div style="height:200px;border:1px solid red;margin-right:150px;">
        this should take all width
    </div>  
</div>

http://jsfiddle.net/wwEQb/