title: Multiple fixed size div's auto line break
body: <p>My Goal is to have a DIV that contains other fixed sized DIVs. Those DIVs should contain a line break (only) if necessary. So it should look like the following:</p>
  
  <p>No line breaks necessary:</p>
  
  <pre><code>_______________________________
  |   ____   ____   ____        |
  |   |__|   |__|   |__|        |
  |                             |
  |                             |
  |_____________________________|
  </code></pre>
  
  <p>Line break necessary:</p>
  
  <pre><code>_______________________________
  |   ____   ____   ____   ____ |
  |   |__|   |__|   |__|   |__| |
  |   ____                      |
  |   |__|   ...                |
  |_____________________________|
  </code></pre>
  
  <p>Currently, the best I could come up is the following:</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div&gt;
          &lt;p&gt;Some text&lt;/p&gt;
      &lt;/div&gt;
      ...
  &lt;/div&gt;
  
  &lt;style&gt;
  #outer {
      overflow: auto;
  }
  #outer div {
      display: inline;
      border: 1px solid black;
  }
  #outer div p {
      width: 60px;
      height: 60px;
      Display: inline-block;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Does anybody have an idea on how to achieve this?</p>