Stretch a div to fit content in all screen size

css, html

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;
}

Problem

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? Really appreciate your helps! Please see my `fiddle` http://jsfiddle.net/vHHcf/

Original source