Reputation: 2392
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.
Upvotes: 1
Views: 1300
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