dev9
dev9

Reputation: 2392

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

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:

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

enter image description here

Upvotes: 1

Views: 1300

Answers (1)

Pieter21
Pieter21

Reputation: 1845

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

Upvotes: 3

Related Questions