Question

I have 3 divs all floated left. I want to set the second div and third div to specific sizes (based on pixels or percentages) and the first div to simply take up the rest of the space.

Additionally at runtime depending on the user’s privileges one of the specific sized divs might not be displayed. I need the first div to take up the space left over.

How can I do this?

Answer 1

You can use display:table property for like :

.parent{
    width:100%;
    display:table;
}
.fill{
    border: 3px solid green;
    display:table-cell;
}
.fixed{
    width: 100px;
    border: 3px solid blue;
    display:table-cell;
}

http://jsfiddle.net/WVDNe/8/

It’s not work in IE7 & below.

But check this it’s work in all browsers:

http://jsfiddle.net/LJGWY/3/