Question

I have sample div structure:

<div id="outer" style="width:600">
<div class="inner"></div> <!--row1-->
<div class="inner"></div>
<div class="inner"></div><br/>
<div class="inner"></div> <!--row2-->
<div class="inner"></div>
</div>

Outer div has fixed width. Inner divs are generated dynamically, so there could be 1,2,3 etc divs per row.

Is it possible to resize (maybe in clear css?) inner divs according to number per row?
So, in example first row divs would have 200px width and in second row 300px width.

Answer 1

You can do this with display: table-cell. Browser support: http://caniuse.com/css-table

See: http://jsfiddle.net/thirtydot/x5ZFg/

HTML: (changed slightly from your question)

<div id="outer">
    <div class="innerWrap"> <!--row1-->
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="innerWrap"> <!--row2-->
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</div>

CSS:

#outer {
    width: 600px
}
.innerWrap {
    width: 100%;
    display: table;
    table-layout: fixed
}
.inner {
    display: table-cell;
    height: 50px;
    border: 1px dashed #f0f
}