並排兩格，右格固定寬度，左格佔用剩餘空間

Question

*感謝大家對此進行檢查。看起來我有一個單獨的索引頁面模板文件，我忘了編輯它。我感到愚蠢的工作了2個小時！對不起，浪費你的時間。*

我想讓div id="right-sidebar"對齊頁面的右側，而div id="right-main"填充剩餘空間的左側。 div id="right-main"正好對齊並填充空間，但右側無法找到。任何人都可以找出我在這裏做錯了什麼，讓右邊欄顯示在div id="right-main"的右邊？

這裏是我的html：

<div id="page-wrap"align="center"> 
    <div class="main" align="center"> 
    <div id="header" align="left"></div> 
    <div id="subheader" align="bottom"></div> 
    <div id="right-sidebar"></div> 
    <div id="right-main"></div> 
    <div id="footer"></div> 

    </div> 

</div> 

這裏是我的CSS：

#page-wrap { 
    padding:10px 10px 10px 10px; 
    background:#FFFFFF; 
} 

.main { 
    /*min-width: 780px;*/ 
    max-width: 1260px; 
    position: relative; 
    text-align:left; 
    padding:10px 10px 10px 10px; 
    border:1px solid #777777; 

    /* Gradient background */ 
    background:#FFF; 
    background: -moz-linear-gradient(top, #5e99d4, #c4d7ea); 
    background: -webkit-gradient(linear, 0% 0%, 0% 75%, from(#5e99d4), to(#c4d7ea)); 

    /* Rounded Corners */ 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
} 


#header { 
    padding:10px 20px 10px 10px; 
    width: 90%; 
    } 

#sitepic { 
    height: 80px; 
    margin: 0 auto; 
    padding: 5px; 
    float: left; 
} 
#p 

#subheader { 
    margin-left: 10px; 
    margin-top: 20px; 
    padding: 0px 10px 0px 10px; 
    } 

#wrapper { 

} 

#right-sidebar { 
    float: right; 
    width: 200px; 
    min-height: 300px; 
    background: #CCCCCC; 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
} 

#right-main { 
    height: auto; 
    min-height: 300px; 
    margin-right: 210px; 
    background: #FFFFFF; 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
    } 

#footer { 
    height: auto; 
    margin-top: 10px; 
    min-height: 40px; 
    background: #5e99d4; 
    position: relative; 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
    } 

Answer 1

右側邊欄似乎對我使用Chrome和IE8的jsfiddle正常工作。你在瀏覽什麼瀏覽器？

Answer 2

我沒有看到任何錯誤。右側欄位於「右側欄」旁邊。 你使用什麼瀏覽器？它在Firefox上看起來很好。

Answer 3

它也適用於我。什麼讓你覺得你看不到它？試着把你的邊框放到10px，看看右手邊是否變得更粗。