css div max-width not working

Question

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?

HTML:

<div style="background-color:red;max-width:800px;display: inline-block">
  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>

  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>

  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>

  <div class="contentgedeelte">
    <h2>nieuws</h2>
  </div>
</div>

CSS:

.contentgedeelte {
  width:310px;
  background:white;
  margin:10px;
  float:left;
  border-radius:5px;
  padding:5px;
}

http://jsfiddle.net/plunje/LmJSy/

Answer 1

OK, here you go:

#container {
    width:800px;
    margin:0 auto;
    text-align:center;
}
.row { 
    display:inline-block;
    background:red;
    margin:0 auto;
}
.contentgedeelte {
    width:310px;
    background:white;
    margin:10px;
    border-radius:5px;
    padding:5px;
    display:inline-block;
    text-align:center;
}

You'll need to add a .row element to wrap your contentgedeeltes in pairs (if that's how you want them displayed). To be honest you're better off just calculating the widths properly, but if you really can't, try this. Also, I've taken your container element, remove the inline styling and added the ID #container.