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?

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. — Matt Ball, May 02 '11 at 14:04
That was my fear. Maybe CSS3 and HTML5 could do something... Or not? — Erick Petrucelli, May 02 '11 at 14:11
If you're willing to drop support for IE7, you do it with CSS easily. [Do you care about IE7?](http://gs.statcounter.com/#browser_version-ww-monthly-201004-201104) A good idea is to do my magical option, with a JavaScript workaround for <=IE7 — thirtydot, May 02 '11 at 16:40
@ErickPetru: See http://meta.stackexchange.com/questions/43019/how-do-comment-replies-work - I'm only here because I happened to look back at this question. — thirtydot, May 02 '11 at 21:34
@thirtydot, supose I don't care about IE7. Can you please answers how can I do it easily only with CSS? — Erick Petrucelli, May 03 '11 at 00:58

score 13 · Answer 1 · answered May 02 '11 at 21:39

13

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

answered May 02 '11 at 21:39

thirtydot

224,678
48
389
349

3

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. – Erick Petrucelli Sep 27 '12 at 14:25
@thirtydot Dude, this is an epic solution! Extremely useful in many cases. Thanks! – Mahdi Mar 18 '15 at 07:21

score 9 · Accepted Answer · answered Sep 23 '16 at 12:30

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>

score 0 · Answer 3 · answered May 02 '11 at 14:45

0

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");

answered May 02 '11 at 14:45

Piotr Kula

9,597
8
59
85

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

3 Answers3

Linked