兩個div元素，一個在中間，另一個在右邊

Question

我想定位一個div元素居中在一個寬度大約爲1000px的頁面，另一個在右邊，覆蓋整個右側，可以根據窗口大小進行調整。 其實我有一個正確的浮動元素居中的div。所以 絕對定位做的工作，但它的缺陷是可見的，同時在頁面中動物園...

我想知道是否有可能使用純HTML，CSS而不是JavaScript。

此外，我已經使用背景屬性，絕對定位來實現上述，但尋找更好的解決方案。

Answer 1

這是我去：

HTML

​<div id="container"> 
    <div id="right"> 
     <div id="right_content">sdfdsfdfg</div>   
    </div> 
    <div id="main">sdfdsfdzgf</div> 
</div> 

CSS

html,body { height: 100% } 
#container { height: 100%; background: #ccc; } 

#right { 
    position:absolute; 
    left: 50%; 
    right: 0; 
    height: 100%; 
    background: #f00; 
    z-index: 0; 
} 

#right-content { 
    position: absolute; 
    left: 150px; /* half the width of #main */ 
} 

#main { 
    position: relative; 
    margin: 0 auto; 
    width: 300px; 
    height: 100%; 
    background: #00f; 
    z-index: 1;  
} 

http://jsfiddle.net/XPE3w/3/