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

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:          


        

Answer 1

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:

    

        
Example Link
        
Example Link
        
Example Link
    

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/