浮动左/右在窗口调整大小的差距

Question

在我的网站上，我有三个divs，一个标题，一个主要内容和一个侧栏在右侧。 侧边栏是实际的问题。我希望侧栏始终粘贴在浏览器窗口的右侧，如果用户调整窗口大小以使其宽度低于主侧栏和侧栏，则侧栏停在主内容的左侧边缘。

当用户首次访问网页并在Mac上至少按下“绿色，最大化窗口按钮”时，窗口应该调整大小，以便主内容和边栏无边距放置。

随着我的代码一切正常，除了当我调整窗口的最小宽度可能，然后按最大化窗口按钮时，两个div之间有一个16px的差距。

我的代码：

HTML：

<div id="header">Header</div> 
    <div id="container">   
     <div id="main"> 
     <p> Left </p> 
     </div> 

     <div id="sidebar"> 
     <p> Right </p> 
     </div> 
    </div> 

CSS：

body{ 
margin:0 0; 
min-width:606px; 
} 

#header { 
    padding:5px 10px; 
    background:#00FF00; 
    height:100px; 
} 

#container{ 
    min-width: 865px; 
    min-height: 50px; 
} 

#main { 
    float:left; 
    min-width: 622px; 
    background:#FF0000; 
} 

#sidebar { 
    float:right; 
    width:243px; 
    min-height: 50px; 
    background:#0000FF; 
    margin-bottom: -20px; 
} 

Answer 1

参考：jsFiddle（在地址栏，删除/show/访问的jsfiddle编辑页面。）

而不是处理float您的布局，使用table和table-cell它允许您的目标实现。在XP机器上测试并使用Firefox，Chrome，IE8。

HTML：

<div id="header">Header</div> 

<div id="container">   

    <div id="main"> 
     <p>Main</p> 
    </div> 

    <div id="sidebar"> 
     <p>Sidebar</p> 
    </div> 

</div> 

CSS：

body{ 
    margin: 0 auto; 
    padding: 0; 
} 

#header { 
    background: green; 
    height: 100px; 
    min-width: 865px;   /* Optional: This size is the same as #container width. */ 
} 

#container{ 
    display: table; 
    width: 100%; 
    min-width: 865px; 
    height: 50px; 
} 

#main { 
    display: table-cell; 
    /*min-width: 622px;*/  /* Not needed since #container min-width less #sidebar width will use remainder percentage space (since #container is set at 100%) */ 
    height: 100%;    /* Maximum height is set via #container height */ 
    background: red; 
} 

#sidebar { 
    display: table-cell; 
    width: 243px;   /* The fixed width of the sidebar */ 
    height: 100%;   /* Maximum height is set via #container height */ 
    background: aqua; 
}