CSS寬度100％ - margin-right

Question

當前有2個div ...左側充滿內容，右側是300px寬的側邊欄。我希望他們並排左右移動，但似乎無法做到。我需要左邊的div來佔用整個屏幕，而不是右邊的div的300px。

是否有可能在左div div右邊緣有正確的div？

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

#container { 
    width: 100% 
} 
#left { 
    float: left; 
    margin-right: 350px; 
} 
#right { 
    float: left; 
    width: 300px; 
    padding-left: 25px; 
} 

編輯：

可我也有右側的位置是：固定的嗎？ 解決方案下面的工作，但是當我做出正確的分區位置：固定;該div不再位於左側div的右側。

Answer 1

更改像左，右DIV順序：

<div id="container"> 
    <div id="right"></div> 
    <div id="left"></div> 
</div> 

在你的CSS取下#left的float:left，改變#right到float:right

#container { 
    width: 100% 
} 
#left { 
    margin-right: 350px; 
} 
#right { 
    float: right; 
    width: 300px; 
    padding-left: 25px; 
} 

編輯：

我的解決辦法應該工作與position: fixed;，只要記住添加right:0到固定格。

#container { 
    width: 100% 
} 
#left { 
    margin-right: 350px; 
} 
#right { 
    position: fixed; 
    right: 0; 
    width: 300px; 
    padding-left: 25px; 
} 

Answer 2

您的標記更改爲：

<div id="container"> 
    <div id="right"></div> 
    <div id="left"></div> 
</div> 

和CSS：

#left { 
    overflow: hidden; 
} 
#right { 
    float: right; 
    width: 300px; 
    padding-left: 25px; 
} 

左格將自動佔據整個空間，旁邊飄來 '側邊欄'。

Answer 3

您可以將＃width:100%和負邊距添加到#left div中，而不是重新排序內容。

http://jsfiddle.net/daCrosby/FGMGB/

HTML

<div id="container"> 
    <div id="left">Left Col</div> 
    <div id="right">Right Col</div> 
</div> 

CSS

#container { 
    width: 100% 
} 
#left { 
    float: left; 
    width: 100%; /* full width of #container */ 
    margin-right: -325px; /* #right's width + left & right padding & margin */ 
} 
#right { 
    float: left; 
    width: 300px; 
    padding-left: 25px; 
} 

編輯

從您在這裏的其他地方發表評論，您需要#right爲position:fixed。這將使元素完全脫離元素堆棧，因此float是不必要的（並且無論如何不會工作）。相反，只需設置固定的位置，你就可以走了。

相關CSS，使用相同的HTML作爲上述

#container2 { 
    width: 100% 
} 
#left2 { 
    width: 100%; /* full width of #container */ 
    margin-right: -325px; /* #right's width + left & right padding & margin */ 
    background:#ddd; 
} 
#right2 { 
    position:fixed; 
    right:8px; 
    top:28px; /* set the right and top to whatever positioning you need. */ 
    width: 300px; 
    padding-left: 25px; 
    background:#444; 
} 

jsFiddle

Answer 4

看看：

創建切緣陰性（http://alistapart.com/article/negativemargins）

Answer 5

一些問題液態佈局的答案是你可能不想重新排列內容，因爲你可能想要移動正確的div的能力在響應式設計中留下左側div，如果我們重新排列內容，這會變得越來越困難。不幸的是，DACrosby的回答可能會導致左div div內容右邊div的重疊。

我的解決方案是設置一個積極的padding-right，匹配左div的負margin-right，並設置box-sizing: border-box。

.container { 
    clear:both; 
} 
.left { 
    box-sizing: border-box; 
    float:left; 
    width: 100%; 
    margin-right: -325px; 
    padding-right: 325px; 
    background:#ddd; 
} 
.right { 
    box-sizing: border-box; 
    background:#666; 
    position:fixed; 
    right:0; 
    width: 300px; 
} 

這可以使用或不使用position:fixed;右分區。

jsFiddle