Question

In example below I have three rows(divs marked with .row) and set width to 33% to have them the same size and fill the whole area. The problem is that these .row divs are dynamically generated and sometimes instead of three divs could be four or two divs. In that case how to set width? For example if theer are two divs a width should be 50% for both.

<div class="membership-table">

        <div class="row">
            <div class="title">
                Personal One Year membership 
            </div>        
        </div>


        <div class="row">
            <div class="title">
                Lifetime membership
            </div>          
        </div>


        <div class="row">
            <div class="title">
                Business One Month membership
            </div>                 
        </div>

</div>

.membership-table { text-align: center; }

.membership-table .row { display: inline-block; margin: 0; padding: 0; width: 33%; }

.membership-table .title { color: #c30000; font-size: 15px; font-weight: bold; }

Answer 1

If you are looking for a pure CSS solution. You will need css3 box-flex: http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/

But this will not work in old browsers like IE.

The other solution would be to do it with jQuery for example:

$(".membership-table .row").css( "width", 100 / $(".membership-table .row").length + "%" )

This will set the width of each of your rows to 100 / numbers of rows.

demo: http://jsfiddle.net/4zGxZ/1/