title: div superposition and center
body: <p>I'm using google maps API and try to set the generated map as a background.</p>
  
  <p>This is my HTML
  </p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;div class="map"&gt;&lt;/div&gt;
    &lt;div class="element"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS
  </p>
  
  <pre><code>.content {
    position: relative;
    height: 500px;
  }
  
  .map {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .element {
    position: absolute;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }
  </code></pre>
  
  <p>The site is supposed to look like this
  </p>
  
  <pre><code>|-------------------------------------|
  |                                     |
  |                                     |
  |                                     | &lt;- Other content
  |                                     |
  |-------------------------------------|
  |.map |-------------------------|     |
  |     |.element                 |     | &lt;- The concerned content (.content)
  |     |                         |     |
  |     |-------------------------|     |
  |-------------------------------------|
  </code></pre>
  
  <p>But the result is not the same. A margin left auto does not work of course. The superposition is ok, the right margin too, but how I can do for the left margin? My site has to be always centered.</p>
  
  <p>Thank you.</p>
  
  <p>Solution from Allan:
  </p>
  
  <pre><code>.content {
    position: relative;
    height: 500px;
  }
  
  .map {
    position: absolute;
    width: 100%;
    height: 100%;
  
    z-index: 0;
  }
  
  .element {
    position: relative;
  
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }
  </code></pre>