Question

I have 3 columns. 1 is fixed width and floats on the left.

The other 2, I would like to take up 50% width of whatever width remains.

So if the screen is 1000px wide, and the 1st column is 300px, then that leaves 700px divided by 2 (350px) for the next 2 columns.

I’ve never come across a way to do this so that it scales.

Can it be done? If so how?

I thought something like this jsfiddle would do the trick, hoping that the right column would take up what was left, then nicely split in 2, but I was quite wrong.

Answer 1

#left {
    float: left;
    width: 200px;
}
#right {width:auto; overflow:hidden}
#first {

    background: #ccc;
}

#second, #third {
    width: 48%;
    background: #333;
    float:left
}

#third {
    background: #000;
}