小窗口尺寸的负边界布局移位

Question

我试着用我的布局来实现一个奇怪的问题，它在整个窗口看起来很好，但在调整窗口大小时开始向右移动。

要求是有3个全高度的柱子2其中有固定的宽度，另一个占据空间的其余部分。

我有过，看起来像这样的HTML无法控制：

<div id="wrapper"> 
    <div id="main"> 

    <div id="nav"> 
    </div> 

    <div id="container"> 
     <div id="content"> 
     </div> 
     <div id="sidebar"> 
     </div> 
    </div>   
    </div> 
</div> 

我想出了一个方法来做到这一切使用负利润率和相对定位，做工精细，除了在窗口很小，整个内容右移。我有一个简单的解决方案来做到这一点？我也想知道为什么会发生这种情况，因为我无法将我的想法包括在内。

的jsfiddle：

http://jsfiddle.net/u5yJd/

Answer 1

两个定位在你的CSS：

• 上#wrapper核弹margin-left并设置left: 0px;
• 上#main添加left: 264px;

固定fiddle只有这些更改。

你的#wrapper是离开窗口的左边，你希望你的#wrapper（在这种情况下）在窗口中，否则定位反对它有点时髦。