How to keep elements on same line with overflow

Question

I am trying to make a page with some divs aligning horizontally and I want the width to resize based on content so I will get a horizontal scroll if the content is bigger than screen size. I have this:

    <div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
</div>

the child divs are aligning side by side but when the screen size is reached it breaks into a new line. Any ideas ?

Answer 1

I would use white-space: nowrap along with display: inline-block. Live demo (click).

By the way, try to use CSS instead of inline styles in your HTML. Inline styles should be avoided unless absolutely necessary.

<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

CSS:

.row {
  white-space: nowrap;
}

.row > div {
  width: 300px;
  display: inline-block;
}