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

user_235588 0
Viewed 57297

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?

css html
5 Answers

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.

user_169110

Make the container div around them

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