html/css - create self expanding dynamic div

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.

It is possible yes, however, it sounds like you're wanting to reprisent data in a table like format. If this is the case and the data is tabular, consider using a table. — Jamie Dixon, Aug 12 '11 at 10:10

score 2 · Accepted Answer · answered Aug 12 '11 at 10:35

2

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
}

answered Aug 12 '11 at 10:35

thirtydot

224,678
48
389
349

Thanks for answer, but table-cell is not working under ie :( It displays it as ordinary div (block). Is there any other way? – karolkpl Aug 12 '11 at 11:12
It should be working in IE8/9. If it's not, the browser is not in "Standards Mode". Do you have a valid doctype as the very first line, such as ` `? When you hit F12 to bring up the Developer Tools, what "Browser Mode"/"Document Mode" is being used? (It will never work in IE6/7, those browsers do not support this) – thirtydot Aug 12 '11 at 11:15
I have ` ` and test under ie7, but I found this http://stackoverflow.com/questions/249103/ie7-and-the-css-table-cell-property – karolkpl Aug 12 '11 at 11:20
That doctype is fine. This answer pretty much covers the situation you're now in: http://stackoverflow.com/questions/6956365/display-table-cell-does-not-work-in-ie-7/6956450#6956450. Would you like a JavaScript fix for IE7? If so, are you using a JavaScript library such as jQuery? – thirtydot Aug 12 '11 at 11:28

html/css - create self expanding dynamic div

1 Answers1

Linked