Question

I have a 2 column layout. The left column has a width of 300px. I would like the right column to take up the full width of the remaining monitor space. But I just can’t figure out how this mixture of px and % can be made to work? Anyone have any ideas?

I guess at worse I can use js to get the user’s viewport width and add some inline styles dynamically but then I would have to perform that on every window resize, etc. So I would much rather have a pure css solution.

Answer 1

I would prefer thirtydot’s answer:

Demo fiddle.

Minimum CSS requirement:

#sideBar {
    width: 300px;
    float: left;
}
#mainContent {
    overflow: hidden;
}