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><divid="div1"style="float: left; width: 100px; background-color: #ff0000;">&nbsp;</div><divid="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;
}