CSS Auto Width Child 'div's in Parent 'div'

I have multiple child divs for "item" in a parent div called "panel."

What is the easiest way to have the "item" divs to have equal widths and, side-by-side, take up the entirety of the "panel" div?

I have them set up now with a static width for a known number of elements. But want to be able to add elements and h开发者_StackOverflowave it auto-size.

There is no magical way of doing this. What you can do probably though, is use server-side to calculate how many item divs there are, and based on that give them widths.

You can also client-side script this with JS to make them all equal.

The easiest way is unfortunately not cross-browser compatible:

HTML:

<div class="parent">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
</div>

CSS

.parent
{
  display: table-row;
  width: 800px;
}

.child
{
  display: table-cell;
}

We use custom tags to build certain elements. You can use java or javascript to get a count of the number of item divs, with a loop and use getElementsByTagName and assign (width / # of items).