41

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?

4b0
  • 21,981
  • 30
  • 95
  • 142
Marcus
  • 4,400
  • 13
  • 48
  • 64

5 Answers5

28

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.

AaronSieb
  • 8,106
  • 8
  • 39
  • 58
  • @ajkochanowicz What isn't working for you? When I resize the "result" window to less than 400px, the floats remain in their 3,3,2 configuration as advertised. – AaronSieb Mar 12 '12 at 17:30
  • Each div is floated left. I don't know what is "advertising" a 3,3,2 configuration. If they're all floated left, why don't they continue to run off the div horizontally? – Adam Grant Mar 12 '12 at 17:33
  • 1
    @ajkochanowicz The wrapping div needs to be as wide as the sum of all its children if you want them to be in a line. This technique doesn't cause floats to stop wrapping *in general*, it just prevents them from reflowing as the browser shrinks. In your case, you want .vertical-scroll to have a width of 816px (800px for the width of all child elements, plus 16px to account for the border on the child elements). – AaronSieb Mar 12 '12 at 19:11
  • Thanks, @AaronSieb For the interests of good documentation, here is my version of the problem with a (sort of) solution http://stackoverflow.com/questions/9672176/prevent-floated-divs-from-wrapping-to-new-line/9672254#comment12286946_9672254 – Adam Grant Mar 13 '12 at 13:38
25

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/

jaume
  • 381
  • 1
  • 5
  • 11
JacobTheDev
  • 17,318
  • 25
  • 95
  • 158
  • 2
    This is the best method IMO, and the only method that easily works (at least for me). The other methods of making a wrapper div with a fixed width might work well if you know exactly how many pixels you want, but in today's world, where screen sizes are always different, you don't want to rely on fixed widths since that prevents you from making a dynamic website. – edwardtyl Jul 30 '15 at 15:02
  • 3
    This method was the most relevant to my situation (short of flexbox which still seems to be a bit of a crapshoot in the browsers we wanted to support) — however in my case I found that I also needed `display: table` on the wrapper `ul` to keep the original 100% height of the columns within. With that, the `white-space: nowrap` on that parent does not seem necessary either, the columns widths end up distributing not too exceed 100% altogether anyway. – natevw Oct 15 '15 at 22:08
  • @JacobTheDev Definitely the more idiomatic & flexible method, should be accepted. Glad I could push you over the 5k mark with my upvote :-) – davnicwil May 18 '17 at 15:40
9

Make the container div around them

.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}
easwee
  • 15,757
  • 24
  • 60
  • 83
8

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.

dlchambers
  • 3,511
  • 3
  • 29
  • 34
6

It is actually really simple. Example of code:

Element {
white-space: nowrap;
}
derpymelon
  • 69
  • 1
  • 2