title: How to keep elements on same line with overflow
body: <p>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:</p>
  
  <pre><code>    &lt;div&gt;
      &lt;div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"&gt;&lt;/div&gt;
      &lt;div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"&gt;&lt;/div&gt;
      &lt;div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"&gt;&lt;/div&gt;
      &lt;div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"&gt;&lt;/div&gt;
      &lt;div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the child divs are aligning side by side but when the screen size is reached it breaks into a new line. Any ideas ?</p>