How to divide div into percentages but keep one constant width value div on left

Question

I have 4 boxes, I want box1 to have 50px width on the left, and the 3 remaining boxes must fill in the rest of screen, they should be resizable. How can I achieve this?

http://jsfiddle.net/DBnSp/

.box1
{
    width: 50px;
    height: 100px;
    background: red;
    float: left;
}

.box2
{
    width: 25%;
    height: 100px;
    background: yellow;
    float: left;
}

.box3
{
    width: 25%;
    height: 100px;
    background: blue;
    float: left;
}

.box4
{
    width: 25%;
    height: 100px;
    background: green;
    float: left;
}

Answer 1

You can use the calc() function to do this:

JsFiddle

width: calc((100% - 50px) / 3);

This works well for this scenario, but if you had a lot of fixed values, it could get a little complex. Basically, it calculates the space you want to fill (100% of the screen, minus the 50px for the first box), and divides it into 3 chunks.

Understand that calc() is part of CSS3, and is not universally supported. Here is a good site for seeing what browsers support it: http://caniuse.com/#feat=calc

Answer 2

You can wrap the percentage width DIVs inside an outer DIV that has a fixed left margin.

http://jsfiddle.net/DBnSp/1/

<div class="box1"></div>
<div class="box-right">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

.box1 {
    width: 50px;
    height: 100px;
    background: red;
    float: left;
}
.box-right {
    margin-left: 50px;
}
.box2, .box3, .box4 {
    width: 33.33%;
    height: 100px;
    float: left;
}
.box2 { background: yellow; }
.box3 { background: blue; }
.box4 { background: green; }