div to fill up the remaining space (width)

Question

hey there i have a div with 100% width (the width of computer screen can be anything) inside this width i have two child divs one with fixed width say 50px and i want the other child div to take up the remaining (100%-50px) space can anyone tell me how do i achieve this please ....

I have done like

<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>

in this code if 50 px is not the 10% of screen the there are some left blank space which I do not want

Answer 1

jsFiddle

Only float the fixed width element.

CSS:

.container {
    height: 10px;
    width: 100%;
}
.right {
    background: red;
    height: 10px;
}
.left {
    background: blue;
    width: 50px;
    height: 10px;
    float: left;
}

HTML:

<div class="container">
 <div class="left">
 </div>
 <div class="right">
 </div>
</div>

Answer 2

You could use a table layout:

HTML:

<div class="container">
    <div class="fixed-width"></div>
    <div class="fluid-width"></div>
</div>

CSS:

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.fixed-width {
    display: table-cell;
    width: 50px;
}

.fluid-width {
    display: table-cell;
}

http://jsfiddle.net/myajouri/zJq8N/

OR...

You could use width: calc(100% - 50px) which is not supported in IE8 and below .

.container {
    width: 100%;
}

.fixed-width {
    float: left;
    width: 50px;
}

.fluid-width {
    float: left;
    width: calc(100% - 50px);
}

http://jsfiddle.net/myajouri/mTq6x/