Paste code

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>Zentrierte DIVs</title>
    <style type="text/css">
      * {
        margin:0;
        padding:0;
      }
      #container {
        width: 980px;
        padding:20px 0;
        margin:0 auto; /*zentriert im Body */
        background: orange;
      }
      #eins {
        width:950px;
        background: rgba(0,0,0,.1);
        margin:auto;
        padding-top: 2px;
        padding-bottom:2px;
      }
      .clearfix:before, .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        zoom: 1;
      }
      #zwei {
        margin-left: 2px;
      }
      #zwei, #drei, #vier, #fuenf, #sechs {
        float: left;
        margin-right:66px;
        /*
        Berechnung des Abstands:
        #eins hat 950px
        - 2*2px links und rechts: 946px
        - 7*100px für die DIVs: 246px Rest

        Nur #zwei bis #fuenf brauchen margin-right:
        246px / 4 = 62px
        Allerdings soll je 2px Rand rechts + links auch noch einfließen:
        Endergebnis 66px
        */
      }
      #eins div {
        background: #ccc;
        width: 100px;
        height: 300px; /* sollte später gelöscht werden, Inhalte bestimmen Höhe */
        position: relative; /*kann weg*/
      }
      div#sieben {
        margin-left: 848px;
        background: #aaa; /* Merke: #sieben hat keinen Float! */
      }
      /* Schmuck-CSS zur Nummerierung, kann weg */
      #eins div:before {
        display:block;
        height:20px;
        width:20px;
        background:#fff;
        color:#000;
        position:absolute;
        left:5px;
        padding-top:10px;
        line-height:12px;
        margin-top:5px;
        text-align:center;
        -moz-border-radius:20px;
      }
      #zwei:before { content: "2";}
      #drei:before { content: "3";}
      #vier:before { content: "4";}
      #fuenf:before { content: "5";}
      #sechs:before { content: "6";}
      #sieben:before { content: "7";}
    </style>
</head>
<body>

  <div id="container">
    <div id="eins" class="clearfix">
      <div id="zwei"></div>
      <div id="drei"></div>
      <div id="vier"></div>
      <div id="fuenf"></div>
      <div id="sechs"></div>
      <div id="sieben"></div>
    </div><!-- #eins Ende -->
  </div><!-- #container Ende -->


</body>
</html>