在网站左侧定位横幅并将横幅对齐到内容

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

从#background