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

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

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.