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?

Freshet

I'm pretty sure this can't be done strictly with CSS, so (if I'm right) you have to sprinkle in a bit of JavaScript. – Cultivate

That was my fear. Maybe CSS3 and HTML5 could do something... Or not? – Freshet

If you're willing to drop support for IE7, you do it with CSS easily. Do you care about IE7? A good idea is to do my magical option, with a JavaScript workaround for <=IE7 – Bournemouth

@ErickPetru: See meta.stackexchange.com/questions/43019/… - I'm only here because I happened to look back at this question. – Bournemouth

@thirtydot, supose I don't care about IE7. Can you please answers how can I do it easily only with CSS? – Freshet

@ErickPetru: I already did :D – Bournemouth

Answer 1

This is already a pretty old question. Although the answers given attended well at the time, nowadays the Flexible Box Layout offers the same result with much more simplicity, with good support in all modern browsers. I strongly recommend it!

/* Important parts */
.parent {
  display: flex;
}

.parent a {
  flex: 1;
}

/* Decoration */
.parent {
  padding: 8px;
  border: 1px solid #ccc;
  background: #ededed;
}

.parent a {
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #dbdbdb;
  color: #111;
}

<div class="parent">
  <a href="#">Some</a>
  <a href="#">Other</a>
  <a href="#">Any</a>
</div>

<br>

<div class="parent">
  <a href="#">Some</a>
  <a href="#">Other</a>
  <a href="#">Any</a>
  <a href="#">One More</a>
  <a href="#">Last</a>
</div>

Freshet

Answer 2

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;
}

Bournemouth

Now that IE7 has less than 4% of marketshare (at least here in my country), I believe it is the best choice since it solves the problem only with CSS. – Freshet

@Bournemouth Dude, this is an epic solution! Extremely useful in many cases. Thanks! – Papagena

Answer 3

For now many use jQuery as a solution to this problem. All you need is one line. This is from your fiddle.

$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");

Lourdeslourie