Div side by side like table cell

Question

I want to have two divs side by side and define width for only one div.

Then, the other div would auto-fit the parent container. How do I do that?

HTML:

<div class="parent">
    <div class="first"></div>
    <div class="last"></div>
</div>

CSS:

.parent {
    width: 100%;
}
.parent .first {
    width: 300px;
    float: left;
    background-color: red;
}
.parent .last {
    width: auto;
    float: right;
    background-color: blue;
}

Thanks.

Answer 1

Don't float the second div. Only the first one needs to be floated.

http://jsfiddle.net/zLef8/