Fixed width div on right, fill remaining width div on left

css, html

Solution

You can do it like this:

HTML:

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

CSS:

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

Check this live example http://jsfiddle.net/QHTeS/2/

Problem

Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space. Does anyone happen to know if this can be done? My attempt (renders block2 underneath block1): ``` <style> .block1 { width: auto; height: 200px; background-color: green; } .block2 { float: right; height: 200px; width: 200px; background-color: red; } </style> <div class="block1">test1</div> <div class="block2">test2</div> ```

Original source

Related problems