Horizontal Divs With One Of Them Taking Remainder Of Space

Classic question on laying out 2 divs horizontally within a parent div with a slight twist - How can one of the divs have a fixed width (e.g. 100px) and the other taking up the rem

Solution 1:

Please check this FIDDLE

There is slight change in your code

<div>
    <div id="div1" style="float: left; width: 100px; background-color: #ff0000;">
     &nbsp;
    </div>    
    <div id="div2" style="width: 100%; background-color: #00ff00;">
     &nbsp;
    </div>
</div>

Solution 2:

you're looking for something like that?

jsfiddle

.container{
    width: 100%;
}
#div1{
    width: 100px;
    background: red;
    float: left;
}
#div2{
    background: green;
}