两个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/