Flexible Div Blocks

I need a three column block such that, if more content in the center (middle column) - side blocks increased. Now i have this http://s2.ipicture.ru/uploads/20110714/NQ6ZNRsB.png HT

Solution 1:

I only changed the css.

http://jsfiddle.net/QvfwN/

#spoiler {
    width:500px;
        background:#ffdac0;
        float: left;
}
.left {
    float:left;
    width:100px;
}
.middle {
    float:left;
    width:300px;
}
.right {
    float:right;
    width:100px;
}

Solution 2:

Remove the background colour from .left, .middle, .right and put it on the #spoiler along with either a float left or have some clearing at the bottom:

#spoiler {
        width:500px;
        background:#ffdac0;
        float: left;
    }
    .left, .middle, .right {
        height: auto !important;
        height: 100%; /* for IE6 */
    }
    .left {
        float:left;
        width:100px;
    }
    .middle {
        float:left;
        width:300px;
    }
    .right {
        float:right;
        width:100px;
    }

This will produce the image you're looking for.

Solution 3:

Simply use a table with 3 TD. This way it will always expand. Divs are not meant to work with eachother like that since they are block elements.

I think it can be done, but the simpler solution is the use of a good ol fashion table :)