html - サイトの左側にバナーを配置し、バナーをコンテンツの右側に配置します

Question

コンテンツを1024pxの幅に設定し、中央に揃えています。左側にバナーが欲しいです。バナーのサイズが異なる可能性があるため、バナーを右側に揃える必要があります。バナーはアンカーで包まれています。以下の例では、画像の代わりにdivを使用しました。

HTML：

<div id="content">
    <div id="banner">
        <a href="#"><div id="background">banner</div></a>
    </div>
    <div id="maincontent">      
        SSSSSSSSSSSSSSSSSSSSSSSSS
        OOOOOOOOOOOOOOOOOOOOOOOOO
        MMMMMMMMMMMMMMMMMMMMMMMMM
        EEEEEEEEEEEEEEEEEEEEEEEEEEE
        CCCCCCCCCCCCCCCCCCCCCCCCC
        OOOOOOOOOOOOOOO
        NNNNNNNNNNNNNNNNNNNNNNN
        TTTTTTTTTTTTTTTTTTTTT
        EEEEEEEEEEEEEEEEEEEEE
        NNNNNNNNNNNNNNNNNNNNNNNNNN
        TTTTTTTTT
    </div>
</div>

CSS：

#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;
}

JSFiddle

text-align: right;トリックをしません。

Answer 1

width: 20pxから削除#background