how to evenly distribute elements in a div next to each other?

In the ‘old days’ you’d use a table and your menu items would be evenly spaced without having to explicitly state the width for the number of items.

If it wasn’t for IE 6 and 7 (if that is of concern) then you can do the same in CSS.

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

Without having to adjust for the number of items.

Example without table-layout:fixed – the cells are evenly distributed across the full width, but they are not necessarily of equal size since their width is determined by their contents.

• http://jsfiddle.net/w3dx/ULQwf/

Example with table-layout:fixed – the cells are of equal size, regardless of their contents. (Thanks to @DavidHerse in comments for this addition.)

• http://jsfiddle.net/kqHWM/

If you want the first and last menu elements to be left and right justified, then you can add the following CSS:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}