Stretch a div to fit content in all screen size

HTML

<div class="whole">
  <div class="fst"></div>
  <div class="sec"></div>
  <div class="thd"></div>
</div>

CSS

.whole {
  width: 100%;
  height: 20px;
}
.whole div {
  height: 20px;
  display: inline-block;
  position: relative;
}
.fst {
  float: left;
  width: 20px;
  background: blue;
}
.sec {
  background: red;
}
.thd {
  float: right;
  width: 20px;
  background: blue;
}

Is there a way to stretch the div.sec to fit with the area left by div.fst and div.thd in any screen size? The width of div.fst and div.thd is fix in pixel.

Is there any solution with only css?

Please see my fiddle http://jsfiddle.net/vHHcf/


solution

This seems to be what you want.

jsFiddle example

Given that you said .fst and .thd have fixed widths, you can use calc() to subtract the 40px value from 100%.

.sec { width:calc(100% - 40px); }

Updated CSS

.whole {
  width: 100%;
  height: 20px;
}
.whole div {
  height: 20px;
  display: inline-block;
  position: relative;
}
.fst {
  float: left;
  width: 20px;
  background: blue;
}
.sec {
  background: red;
  width:calc(100% - 40px);
}
.thd {
  float: right;
  width: 20px;
  background: blue;
}