頁面的一半+ CSS對齊

我不知道如何解釋，但繪製了我需要的CSS對齊圖片。模板具有固定寬度，綠色區域表示主要內容，藍色部分則爲該頁面提供標題。頁面的一半+ CSS對齊

綠色div具有以下的css：

#content { 
    width: 980px; 
    margin: 0 auto; 
}

這個偉大的工程爲綠色框，但我不知道如何讓藍色的部分。 div需要覆蓋頁面右側+綠色區域的整個寬度，如下圖所示。

請記住，用戶可以調整窗口的大小，使藍色位的寬度無法修復！

我該如何使用純CSS來實現這個？

http://img15.imageshack.us/img15/3884/cssalign.png

來源

2011-07-30 SwissChocolate

就像圖片！

的CSS：

#title{ 
    position:relative; 
    width:50%; 
    margin:50px 0 50px 50%; 
    background:blue; 
    padding:25px 245px; 
    left:-490px; 
} 
#content{ 
    width:980px; 
    height:600px; /* for it to work with no content */ 
    margin:0 auto; 
    background:green; 
}

HTML：

<div id="title"></div> 
<div id="content"></div>

DEMO：http://jsfiddle.net/sparkup/jL10axxv/

來源

2011-07-30 01:25:19 Sparkup

你沒有使用相同的綠色和藍色陰影。 -1（j/k） – mpen

非常好，很高興知道。 – ngen

@Mark向差照明。） – Sparkup

基本輪廓：給他們倆同left位置，給綠色的任何固定寬度你想要的，並給予藍色right: 0。

來源

2011-07-30 01:41:52 Chuck

頁面的一半+ CSS對齊

回答

相關問題