html - 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.

question from:https://stackoverflow.com/questions/4676442/two-floated-columns-one-fixed-one-loose-width

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;
}