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.

enter image description here

you can use [Columnizer](http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/) — Farshad, Aug 30 '14 at 07:23
For those who are looking for a solution supporting modern web browsers: http://stackoverflow.com/questions/25567897/justify-elements-with-fix-space-variable-width/25568072#25568072 — Hashem Qolami, Aug 30 '14 at 07:43

score 3 · Accepted Answer · answered Aug 30 '14 at 07:29

3

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;
}

answered Aug 30 '14 at 07:29

Pieter21

1,765
1
10
22

I even modified it to have an empty div, and that worked out of the box (expect for color coding it) – Pieter21 Aug 30 '14 at 07:33
Thank you. It's great, however I wanted to adjust height as well, so it is not fixed but stretches with the outer DIV. And why did you set width to 90% instead of 100% ? – dev9 Aug 30 '14 at 07:37
fiddle around with the example given... Replace any height with a percentage or remove it until it meets your requirement/preference – Pieter21 Aug 30 '14 at 07:41

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

1 Answers1