How to make buttons stretch equally to fill container <div> (Act like a table row with cells)

Question

Let's say I have a container <div> with some buttons in:

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
    <div style="clear:both"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And assigned some CSS to this:

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
}
.button{
    background:#F00;
    float:left;
    height:inherit;
    line-height:inherit;
}

Background colours are just so that I can see what I am doing. I'm wondering if there is a JavaScript-free way to make all of the button <div>s stretch (with equal widths) to the parent <div> and I want them to automatically get the width using the parent <div>. So, yes I could just set the .button width to 25% because there are 4 of them but if I added more buttons I would want them to automatically get a new width.

I hope I explained myself well enough, I did look around but couldn't find anything to suit this. Can I do this in CSS or is it a JS-job?

JSFiddle here.

Thanks.

Ferriter

Answer 1

It can be done with display: table; and display: table-cell;

I know the bad connotations that come with tables but you aren't using table markup, you are just making div's act like tables.

See demo here

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
</div>​

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
    display: table;
}
.button{
    background:#F00;
    display: table-cell;
}
​

Allow

Anything which is specified as being a table when not a table somehow is a hack, even in css. +1though for answering the question in a css way – Vanitavanity

@F4r-20 The only downside is lack of support in certain IE browsers, think its 6 or 7, not sure – Allow

With CSS3, and more importantly the big players now strictly improving cross - compatibility when it comes to web standards, you should have no problems or bugs using this method - on the newest browsers & systems at least. – Butt

To add to this, I added styles table-layout:fixed; to .cont and word-wrap:break-word; to .button to get the same-width effect. Thanks @Andy, spot on! – Ferriter

This is a valid and useful solution in many circumstances where there is no better solution. If it were called display:matrix, we'd have no issue. display:table does NOT specify that something is a table. CSS can't do that. It's just a presentational analogy to something we already are familiar with. Not to be confused with <table>. – Afrikah

Answer 2

This is a perfect use case of the CSS Flexible Box Model.

HTML5 Rocks has a nice introduction to this.

This needs vendor prefixes and it's not supported on old browsers. There's Flexie which is a polyfill for older browsers.

Moorish

's answer led me to perfect solution for my button-fill-width problem. Display: flex is perfect for filling remainder space and still having min-width; css-tricks.com/filling-space-last-row-flexbox – Forewing

Answer 3

I found out that HTML buttons are a bit weird, for example "text-align: center" will alter the position of the buttons in a div, whereas "margin: auto" does not. And also, changing the size of a button makes it's styling different (in Chrome).

An alternative solution may be to make a clickable div, in this way you can also style the button, to be certain of how it looks cross-browser. (HTML5)

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

Reference: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Flatt