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'll have to mess with the paddings to fix the rest, but below is a working fiddle and the code. Sorry about the poor naming conventions, but you should be able to change all that to what you need.

http://jsfiddle.net/8HgHt/

.third {
  padding: 0;
  background-color: gray;
  height: 100px;
  float: left;
  display: table-cell;
  width: 33%;
}

.third:hover {
  background-color: red;
}

.third_holder {
  float: left;
  width: 100%;
  display: table-cell;
}

.absolute_div {
  width: 200px;
  display: table-cell;
  background-color: silver;
}

.whole_container {
  width: 100%;
  display: table;
}

<div class="whole_container">

  <div class="third_holder">
    <div class="third">
    </div>
    <div class="third">
    </div>
    <div class="third">
    </div>
  </div>

  <div class="absolute_div">
  </div>
</div>