How can I prevent floated div elements from wrappi

Question

How do you make DIV's that are floated left next to each other not wrap when the browser is re-sized such that the viewport becomes smaller?

div {
  float: left;
}

For example when the browser is fully maximized the divs line up like this:

|div| |div| |div| |div| |div| |div| |div| |div|

But when the browser re-sized smaller this happens:

|div| |div| |div| |div| |div|
|div| |div| |div|

How can I make the divs not wrap when the browser is re-sized smaller?

Answer 1

It is actually really simple. Example of code:

Element {
white-space: nowrap;
}

Answer 2

Make the container div around them

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

Answer 3

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.

Answer 4

I realize that it's fashionable to hate on tables, but they can be useful.
http://jsfiddle.net/td6Uw/
Instead of floating the divs, place them in a table and wrap the table with a size-constrained div. The TR will prevent wrapping.
Also, I used DIVs inside the TDs to make cell styling easier. You could style the TDs if you spend the time, but I find them hard to style and usually wimp out and just use the DIV-in-TD method employed by my fiddle.

Answer 5

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/