title: Positioning a banner on the left side of a site and align banner right to the content
body: <p>I have the content set to 1024px width and aligned to the center. Now I want a banner on the left side. Because the banner can be in different size I have to align the banner to the right side. The banner is wrapped with an anchor. In my example below I used a div instead of an image.</p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;content&quot;&gt;
      &lt;div id=&quot;banner&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;div id=&quot;background&quot;&gt;banner&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=&quot;maincontent&quot;&gt;      
          SSSSSSSSSSSSSSSSSSSSSSSSS
          OOOOOOOOOOOOOOOOOOOOOOOOO
          MMMMMMMMMMMMMMMMMMMMMMMMM
          EEEEEEEEEEEEEEEEEEEEEEEEEEE
          CCCCCCCCCCCCCCCCCCCCCCCCC
          OOOOOOOOOOOOOOO
          NNNNNNNNNNNNNNNNNNNNNNN
          TTTTTTTTTTTTTTTTTTTTT
          EEEEEEEEEEEEEEEEEEEEE
          NNNNNNNNNNNNNNNNNNNNNNNNNN
          TTTTTTTTT
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#content {
    width: 400px;
    margin: 0 auto;    
    background-color: red;
    position: relative;
  }
  
  #background {
      width: 20px;
      height: 100px;    
      background-color: blue;
      color: white;
  }
  
  #banner{
      position: absolute;
      left: -200px;
      width: 200px;
      height: 100px;
      background-color: yellow;    
      text-align: right;
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/uwRRP/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p><code>text-align: right;</code> doesn't make the trick.</p>