title: Center one of two sibling divs
body: <p>In the following, I'd like to alter the CSS such that the <code>right-sibling</code> is <em>truly</em> centered in the <code>container</code> div. (Edit: without using absolute positioning). </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type='text/css'&gt;
        #container {
          width: 500px;
        }
        #left-sibling {
          float: left;
        }
        #right-sibling {
          text-align: center;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='container'&gt;
        &lt;div id='left-sibling'&gt;Spam&lt;/div&gt;
        &lt;div id='right-sibling'&gt;Eggs&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In its current implementation, the right sibling's centering is affected by the left sibling -- you can see this by adding <code>display: none</code> to the <code>left-sibling</code>'s style.</p>
  
  <p>(Note: I'd like to avoid modifying the HTML structure because, as I understand it, the whole point of CSS is to decouple the tag structure from the presentation logic, and this doesn't seem like a really crazy request for CSS to handle.)</p>
  
  <p>TIA.</p>