Question

Probably not the best title I’ve ever written, but I find it hard to formulate this question well. I’m working on a div that should cover 100% of the parent (could be body). This div should have a variable number of children, so every time the page is refreshed the children count can vary from one to ten, maybe more.

I want these children to all be equally wide and have a percentage width. So if there are five children, each child should have width: 20%. If there are two children, they should have width: 50%. I could do this with JavaScript, but I’d really prefer keeping all layout stuff in the css.

Is there a way to accomplish this without using tables?

Answer 1

Use display: table, display: table-cell, and table-layout: fixed.

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

table-layout: fixed is to equally distribute the available width between any cells without an assigned width.

This works in all modern browsers. It doesn’t work in IE7. If you need this to work in IE7, either use JavaScript to polyfill, or use a real <table>.

CSS:

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.container > div {
    display: table-cell;
    border: 1px dashed red;
}

HTML:

<div class="container">
    <div>1</div>
    <div>2</div>
    ..
</div>​