How can I prevent floated div elements from wrapping when the browser is re-sized?

Wrap them in another div, which has a width (or min-width) specified.

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.

I'm pretty late to the game, but here's what I've found that works:

Let's say you have a navigation structured as:

<nav>
    <ul>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
    </ul>
</nav>

To get it to display the links inline, without ever wrapping, you can simply use:

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

No fixed widths or anything required.

Fiddle: http://jsfiddle.net/gdf3prb4/

Make the container div around them

.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}