title: How to prevent inline-block divs from wrapping?
body: <blockquote>
    <p><a href="http://jsfiddle.net/UnNbW/" rel="noreferrer"><strong>jsFiddle</strong> demo</a></p>
  </blockquote>
  
  <p>I want the <code>div</code>s to:</p>
  
  <ul>
  <li>Wrap their content.</li>
  <li>Stay in their originally associated line, essentially without wrapping.</li>
  </ul>
  
  <p>Basically, the tables are stacking below each other, when they can't stay on screen. I would rather they become hidden off screen.</p>
  
  <p>I've tried adding <code>overflow: hidden;</code> to the main layout style. I do not want to fix a width for each <code>div</code>. It needs to fit content in.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.layout {
    -moz-border-radius: 15px;
    border-radius: 15px;
    vertical-align: top;
    display: inline-block;
  }
  
  .layoutbacking {
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 5px;
    margin: 5px;
    background: #CCCCCC;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="layout" style="background: #222222; width: 100%"&gt;
    &lt;div&gt;
      &lt;div class="layout layoutbacking"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;header 1&lt;/th&gt;
            &lt;th&gt;header 2&lt;/th&gt;
            &lt;th&gt;header 3&lt;/th&gt;
            &lt;th&gt;header 4&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;data 1&lt;/td&gt;
            &lt;td&gt;data 2&lt;/td&gt;
            &lt;td&gt;data 3&lt;/td&gt;
            &lt;td&gt;data 4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;data 1&lt;/td&gt;
            &lt;td&gt;data 2&lt;/td&gt;
            &lt;td&gt;data 3&lt;/td&gt;
            &lt;td&gt;data 4&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;data 1&lt;/td&gt;
            &lt;td&gt;data 2&lt;/td&gt;
            &lt;td&gt;data 3&lt;/td&gt;
            &lt;td&gt;data 4&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="layout"&gt;
        &lt;div class="layout layoutbacking"&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;th&gt;header 1&lt;/th&gt;
              &lt;th&gt;header 2&lt;/th&gt;
              &lt;th&gt;header 3&lt;/th&gt;
              &lt;th&gt;header 4&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div class="layout layoutbacking"&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;th&gt;header 1&lt;/th&gt;
              &lt;th&gt;header 2&lt;/th&gt;
              &lt;th&gt;header 3&lt;/th&gt;
              &lt;th&gt;header 4&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="layout layoutbacking"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;header 1&lt;/th&gt;
            &lt;th&gt;header 2&lt;/th&gt;
            &lt;th&gt;header 3&lt;/th&gt;
            &lt;th&gt;header 4&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;data 1&lt;/td&gt;
            &lt;td&gt;data 2&lt;/td&gt;
            &lt;td&gt;data 3&lt;/td&gt;
            &lt;td&gt;data 4&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="layout layoutbacking"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;header 1&lt;/th&gt;
            &lt;th&gt;header 2&lt;/th&gt;
            &lt;th&gt;header 3&lt;/th&gt;
            &lt;th&gt;header 4&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;data 1&lt;/td&gt;
            &lt;td&gt;data 2&lt;/td&gt;
            &lt;td&gt;data 3&lt;/td&gt;
            &lt;td&gt;data 4&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>