How can I prevent floated div elements from wrapping when the browser is re-sized?
css, html
Solution
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.
Problem
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 `div`s 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 `div`s not wrap when the browser is re-sized smaller?