Percentage-width divs followed by fixed width div

Question

I am trying to achieve the following layout with CSS and HTML:

_____________________________________________________________________________
|  div1  33%         |  div2  33%         |  div3  33%         | div4 200px |
—————————————————————————————————————————————————————————————————————————————

To be clear, I want div1, div2, div3 to occupy one third of the remaining width after the 200px div is added.

What I have tried:

1. Having div1, div2, div3, in a container div

2. Then floating div4 to the right and giving it a width of 200px.

I have tried various other things, to no avail. I would appreciate any help with this.

Answer 1

You could use calc

Jsfiddle Demo

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; /* accounting for borders */
}

.wrapper {
    width:80%; /* or any width */
    margin:10px auto; /* for visualisation purposes only */
    overflow:hidden; /* float containment */
}

.wrapper div {
    float:left;
    height:100px;
}

.fixed {
    width:200px;
    background: lightblue;
}

.percent {
    width:calc((100% - 200px)/3); /* the magic bit */
    background: lightgreen;
    border:1px solid grey;
}

Support IE9 & up - http://caniuse.com/calc