Stop floating divs from wrapping

html

responsive-design

css

layout

byAnton Shumikhin·Mar 7, 2025

The display: inline-block; on child divs combined with white-space: nowrap; on the parent container is your solution to prevent divs from wrapping:

.container {
  white-space: nowrap; /* keep my divs in a row, they aren't quarrelling yet! */
  overflow-x: auto; /* shout out to horizontal scrolling */
}

.child-div {
  display: inline-block;
  /* specify width and height, they desperately need some space */
}

The accompanying HTML might resemble this:

<div class="container">
  <div class="child-div">Div 1</div>
  <div class="child-div">Div 2</div>
  <!-- Add more divs, the more the merrier -->
</div>

Tip: Switch your wardrobe from float to inline-block, they are cooler. Turn on overflow-x: auto; for horizontal scrolling on narrow screens.

Get inline-block on your side

The superpower of display: inline-block lies in mixing traits of both inline and block elements. Elements sit snugly side-by-side while retaining block-level features:

Inline-block rules:

.child-div are individual blocks that can be resized.
Adjacent .child-div will stay in line, like well-behaved children.
Margins? They won't collapse. Guaranteed! 😎
Beware of the notorious HTML whitespaces, they may create unwanted gaps.

Get an in-depth understanding of the inline-block and its quirks here.

Going beyond simple: Flexibility and browser compatibility

Crafting a flexible layout

While you fix your wrapping problem, let's not commit to rigid layouts. Welcome adaptability:

Use percentages or viewport units for resizable child divs.
min-width can prevent your .child-div from becoming too skinny.
Ditch hard-coded widths. They are layout spoilers.

Doing a compatibility check

Yes, display: inline-block is popular, but always cross-verify on caniuse.com, because "better safe than sorry"!

Dispelling unrelated myth properties

While fixing non-wrapping layouts, know that properties like position, z-index, transition, or float are like spectators, unrelated to the action:

Position: absolute; can throw elements off from the normal layout flow.
Z-index is only concerned about the stacking order, not your layout.
Overflow-x: hidden; on body can keep horizontal scrolling under check.

Polishing techniques

Once you've tackled the initial problem, here are ways to enhance your layout:

Use borders to inspect your layout. They serve as excellent layout guides.
Media queries can be handy for different viewport widths.
Eradicate arbitrary widths like 20000px. They are "layout Voldemort", the ones not to be chosen!

explain-codes / Html / Stop floating divs from wrapping

Linked

Two inline-block, width 50% elements wrap to the second line



How to make a DIV not wrap?



Prevent linebreak after </div>



How to make a parent div auto size to the width of its children divs



How to align two elements on the same line without changing HTML

