Question

I have a div which has float: left, and a div which has float: right. The div which has float: left has a width of 50px, while the div which has float: right should take up the remaining horizontal space in the parent div.

How can I accomplish this with CSS?

Answer 1

Try using margin-left:60px (or whatever width your left div could be) without using float in the right div. See related fiddle here: http://jsfiddle.net/CKcQH/

CSS:

.leftDiv
{
    width:50px;
    float:left;
    border:1px solid red;
}
.rightDiv
{
    margin-left:55px; /* Compute total width of leftDiv */
    border:1px solid blue;
}

Html:

<div>
    <div class="leftDiv">
        My content on left
    </div>
    <div class="rightDiv">
        My content on right should take all the space the parent has (after excluding the space on the left)
    </div>
</div>