title: CSS: Positioning a box over top over a main div
body: <p>I have the following HTML with the <code>div.logo</code> centered in the middle.</p>
  
  <p>What would be the easiest cross browser solution to allow me to put another box <code>contactDetails</code> onto the left or right but retain the centered image?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="page-wrap"&gt;
      &lt;header&gt;
          &lt;div id="logo"&gt;
                  &lt;img src="_assets/images/logo.png" width="500" height="518"/&gt;
                  &lt;h3&gt;New Website Soon&lt;/h3&gt;
          &lt;/div&gt;&lt;!--END logo--&gt;
          &lt;div id="contactDetails"&gt;
              &lt;p&gt;Content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/div&gt;&lt;!--END page-wrap--&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>*{
      padding: 0;
      margin: 0;
  }
  body{
      background:url('../images/background.png') repeat;
      margin: 0 auto;
  }
  div.page-wrap,header,div.logo,h1{
      font-family: arial;
      text-align: center;
      margin:0;
  }
  div.page-wrap,header,div.logo,img{
      border-radius: 5px;
  }
  div.contactDetails{
      float: left;
      margin: 0;
  }
  </code></pre>