How to make children auto fit parent's width only with CSS?

Question

I have a server-side component that generates a fluid layout "toolbar" using DIV without fixed width, generating many A inside it.

Then I need customize that layout to make all A tags auto fit to the parent width. But the number of children is variable and the parent's width isn't known (it auto fits itself to the window).

I made some tests with this Fiddle: http://jsfiddle.net/ErickPetru/6nSEj/1/

But I can't find a way to make it dynamic (uncomment the last A tag to see how it ins't working, lol).

I can't change the server-side sources to gerenate HTML with fixed width. And I really would like to solve it only with CSS if there is any way, even that with JavaScript I could achieve that result.

How can I make all the children auto-fit itself to the parent's width independently of the number of children?

Answer 1

You can use display: table-cell:

See: http://jsfiddle.net/6nSEj/12/ (or with 5 children)

This won't work in IE7 because that browser simply doesn't support display: table and friends.

div.parent {
    ..
    width: 100%;
    display: table;
    table-layout: fixed;
}
div.parent a {
    ..
    display: table-cell;
}