How to create a responsive DIV with a dynamic number of inner DIVs

Question

I would like to create a responsive DIV that would stretch to entire available space. Inside it, I want a number of inner DIVs that would also stretch that way.

Easy enough, but there is more:

• The number of inner DIVs should be changable. It shouldn't matter whether there is 4 or 5 of them.
• Every inner DIV should have the same size. Even if it's empty.
• I prefer HTML/CSS more than JS, but not HTML5/CSS3 (I have to support older browsers).

I tried a number of things, but none of them actually worked like I wanted. Thanks in advance for any tips.

Answer 1

Please check: http://jsfiddle.net/g4dGz/777/

The initial example had 2 columns, and to check if your request was fulfilled, I added the 3rd column.

Where I could create:

<div id="wrapper">
   <div id="one">one one one one one one one one one one one one one one one one one one one one     one</div>
    <div id="two">two two two two two two</div>
    <div id="three">3</div>
</div>

With CSS:

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}