title: CSS3 Horizontal div alignment
body: <p>So what I'm trying to do is</p>
  
  <pre><code>|-------------------------------------------------------------|
  |-------|leftdiv-250px|centerdiv-1000px|rightdiv-250px|-------|
  |-------------------------------------------------------------|
  </code></pre>
  
  <p>So here's the HTML</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div id="header-top"&gt;
          &lt;div id="header-top-main"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="header-main"&gt;
          &lt;div id="header-main-inner"&gt;
              &lt;div id="header-main-left"&gt;
              &lt;/div&gt;
              &lt;div id="header-main-center"&gt;
              &lt;/div&gt;
              &lt;div id="header-main-right"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS</p>
  
  <pre><code>#header {
      height: 190px;
      width: 100%;
      background: #e5e5e5;
      margin: auto;
  }
  
  #header-top {
      height: 50px;
      width: 100%;
      background: #e9e9e9;
      background-image: url(../img/header-top-bg.png);
      -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.75);
      box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.75);
      margin: auto;
      z-index: 999;
      position: relative;
  
  }
  
  #header-top-main {
      height: 50px;
      width: 1000px;
      margin: auto;
  }
  
  #header-main {
      margin: auto;
      width: 100%;
  }
  
  #header-main-inner {
      margin: auto;
      width: auto;
  }
  
  #header-main-left {
      width: 250px;
      height: 140px;
      background: url(../img/header-main-left-bg.png);
      float: left;
  }
  
  #header-main-center {
      width: 1000px;
      height: 140px;
      background: #f7f7f7;
      display: inline;
  
  }
  
  #header-main-right {
      width: 250px;
      height: 140px;
      background: url(../img/header-main-right-bg.png);
      float: right;
  
  }
  </code></pre>
  
  <p>So I'm not sure what the problem is, I've tried to float them all left in a wrapper that has an auto margin but hadn't seemed to work. Another issue that came up was it all displayed in 1 line, but it stacks up on the left of the page, continuing all the way to right, giving the page a scroll.</p>
  
  <p>What I want is, for the 'header-main' area to be centered with the 3 divs. And if the 'header-main' area goes off page, I would want it to continue off page without a scroll. If a screenshot of what I'm trying to do is needed, then I can provide it.</p>
  
  <p>here would be another example</p>
  
  <pre><code>--------------------|------[        header-top          ]------|-------------------
  space beyond screen |------[leftdiv][centerdiv][rightdiv]------| spce beyond screen
  --------------------|------[        navigation          ]------|-------------------
  </code></pre>