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; 
}