Question

Here’s what I’m working with:

<div id="parentDiv">
   <div id="labelDiv"></div>
   <div class="contentDiv"></div>
   <div class="contentDiv"></div>
   <div class="contentDiv"></div>
   <!-- ... -->
</div>

labelDiv is always a fixed size. In this case, 30px. parentDiv is set to a width of 75%. There can be 1 to any number of contentDiv. What I want is to evenly space out the contentDiv objects. I’m trying to do this all in CSS (2.1, if possible). I was able to write a quick jQuery function to equally space out the divs, but I don’t feel like its the best solution.

Any ideas?

Answer 1

display: table; table-layout: fixed can do this.

This is all CSS 2.1 as requested, but check the browser support – it works everywhere except IE6/7.

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

CSS:

#parentDiv {
    display: table;
    table-layout: fixed;
    width: 75%;
    height: 100px;
    border: 1px solid #444
}
#parentDiv > div {
    display: table-cell;
    border: 1px dashed #f0f
}
#labelDiv {
    width: 30px;
    background: #ccc
}