CODEWITHSUNDEEP
csshtmlcss-float
dnatoli
dnatoli

Reputation: 7012

Variable sized floating divs

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?

Upvotes: 0

Views: 71

Answers (1)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 1

Related Questions