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: 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

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 2

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/