Percentage-width divs followed by fixed width div
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>
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