CSS |伸出包装水平固定在浏览器分辨率

Question

http://jsfiddle.net/aLmUy/1/

^^^^这里看看，看看我的意思^^^

确定这是一个有点难以解释......

基本上什么我想要的是有一个固定的布局水平（不垂直），所以页面被拉伸并扩展包装，以填充和重新调整大小的人浏览器。我想设置的唯一尺寸是包装材料相隔很远的分色。如果您要单击浏览器边缘并更改大小，我希望页面可以使用浏览器重新调整大小。

我想这样做的方式是例如可以说我的布局，包括我的内容在左边，和导航菜单，右侧的....

我只是让我的内容70％的宽度和我的菜单30％的权利？但这并不奏效，因为我的利润空间已经占据了分离的空间。那么我该如何去做这个布局结构呢？这几乎是每个网站使用我无法掌握它是如何完成的。

CSS：

#wrapper { 
position: relative; 
float: left; 
/* width: 70%; <--- THIS DOES NOT WORK WITH MARGINS /* 
background: #ccc; 
padding: 30px; 
margin: 0 0 30px 20px; 
border-radius: 4px 4px 4px 4px; 
text-align: center; 
} 

#wrapper_right { 
position: relative; 
float: right; 
/* width: 30%; <--- THIS DOES NOT WORK WITH MARGINS /* 
background: #ccc; 
padding: 30px; 
margin: 0 20px 30px 0; 
border-radius: 4px 4px 4px 4px; 
text-align: center; 
} 

.fade { 
opacity: 0.7; 
transition: opacity .25s ease-in-out; 
-moz-transition: opacity .25s ease-in-out; 
-webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover { 
opacity: 1; 
} 

HTML：

<!-- #mainwrap --> 
    <div id="wrapper" class="fade"> 

     BLAH BLAH BLAH BLAH BLAH BLAH <br /> 
     BLAH BLAH BLAH BLAH BLAH BLAH <br /> 

    </div> 
    <!-- /#mainpagewrap --> 


    <!-- #wrapper_right --> 
    <div id="wrapper_right" class="fade"> 
    BLAH<BR /> 
    BLAH<BR /> 
    BLAH<BR /> 
    BLAH<BR /> 
    BLAH<BR /> 
    BLAH<BR /> 
    BLAH<BR /> 
    BLAH<BR /> 
    </div> 
    <!-- /#wrapper_right --> 

有人可以做一个简单的布局与中间左侧的包装，内容和另一在右边的尺寸为25％，50％，25％垂直边缘，这也重新确定了尺寸克到浏览器的分辨率？

所以我可以看到它是如何完成的。同样在此先感谢任何人帮助（：

Answer 1

我达到你想要做什么，但我不得不改变一些东西：

1. 新增父div包住2周的div
2. 删除了利润率和添加填充到父。
3. inline-blocked的div和移动右div从左侧

远

Answer 2

@ashley再次感谢这比使用这样的事情要好得多：

#wrapper { 
position: relative; 
float: left; 
width: 55%; 
background: #fff; 
padding: 3%; 
margin: 0 0 5% 2%; 
border-radius: 4px 4px 4px 4px; 
text-align: center; 
} 

#wrapper_right { 
position: relative; 
float: right; 
width: 28%; 
background: #fff; 
padding: 3%; 
margin: 0 2% 5% 0; 
border-radius: 4px 4px 4px 4px; 
text-align: center; 
}