title: css div max-width not working
body: <p>I think it's my lack of css knowledge, but i don't get this thing working. My purpose is to have a container div which have the MAXIUMUM witdh of 800px and aligned in the middle of the page, with one or two elements per 'row', depending on the available screen-space. But in the example you see that the whole 800px is taken. How to accomplish that the 800px is only the max?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="background-color:red;max-width:800px;display: inline-block"&gt;
    &lt;div class="contentgedeelte"&gt;
      &lt;h2&gt;nieuws&lt;/h2&gt;
    &lt;/div&gt;
  
    &lt;div class="contentgedeelte"&gt;
      &lt;h2&gt;nieuws&lt;/h2&gt;
    &lt;/div&gt;
  
    &lt;div class="contentgedeelte"&gt;
      &lt;h2&gt;nieuws&lt;/h2&gt;
    &lt;/div&gt;
  
    &lt;div class="contentgedeelte"&gt;
      &lt;h2&gt;nieuws&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.contentgedeelte {
    width:310px;
    background:white;
    margin:10px;
    float:left;
    border-radius:5px;
    padding:5px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/plunje/LmJSy/" rel="nofollow">http://jsfiddle.net/plunje/LmJSy/</a></p>