Two floated columns - one fixed, one loose width

Question

I've looked around SO, but I cannot find one that matches my occurrence, I basically have two columns one fixed width (185px) and the other column has no fixed width, however I need the last column to fill the last space, e.g.

........................................... .---------  ------------------------------. .+       +  +                            +. .+       +  +                            +. .+       +  +                            +. .+       +  +                            +. .+       +  ------------------------------. .+       +                                . .+       +                                . .+       +                                . .---------                                . ........................................... 

The first column should always be 100% to the bottom when the second column fills the remaining width, they both are floated left, if I resize the browser window, the second column shows under the first column. I need the second column to fill the remaining width and be flexible when resizing the browser window.

Answer 1

There's actually an easier way to do it than using floats:

.container {     position: relative; }  .left {     width: 185px;     position: absolute;     top: 0;     left: 0; }  .right {     margin-left: 185px; } 

Answer 2

By using negative margins from this tutorial the CSS can look as follows

html, body, .container {     height:100%;     padding:0;     margin:0; } .container {     min-width: 300px; } .left {     float:left;     width: 185px;     margin-right: -185px;     height:100%; } .right {     margin-left:185px; } 

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/