Question

I need to create a wrapper(container) with (from 2 to 4 div inside) like:

<div class="wrapper">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

my problem is that I CAN’T set the width for the inner divs, because they must have an equals width, so if my wrapper is 300px and I only have two inner divs (150px once) etc etc.

But I can’t set the width into .css file, because as i told there can be from 2 to 4 divs.

The question is: is it possible to autosize the inner divs (to get the entire wrapper’s width) or not?

Thanks!

Answer 1

You can use display:table property for this:

.wrapper{
    width:300px;
    border:2px solid green;
    display:table;
}
.wrapper > div{
    display:table-cell;
    border:1px solid red;
    height:50px;
}

Check this http://jsfiddle.net/7E9Nj/