CSS：侧栏div不会留在原地！

Question

我附上我的HTML和CSS，希望有人能帮助我。基本上我有一个右侧边栏div内容不会推到顶部。当我使用位置和高度属性时，内容只是浮动在整个页面上，甚至不会保留在右侧边栏中。我希望有人能够指引我走向正确的方向，我已经看过很多帖子，没有任何我尝试似乎有效。

HTML：

<div id="container"> 

<div id="head"> 
</div>   


<div id="menuTop"> 
</div> 

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

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

<div id="footer"> 
</div> 
</div> 

CSS：

#container { 
margin: 0 auto; 
width: 1000px; 
background: url("bgbg.jpg"); 
border: 10px solid #000; 
} 

#content { 
float: left; 
width: 750px; 
padding: 0; 
background: url("bgbg.jpg"); 
border-right: 1px dashed #fff; 
} 

#sidebar { 
float: right; 
background: url("bgbg.jpg"); 
width: 250px; 
} 

Answer 1

CSS盒模型101 - 股利（或要素）的实际宽度为width + padding + borders

所以你的两个浮动的div添加up to 1001px

内容div @ 750px + 1px边框实际上是751px宽，使它的宽度749px，一切都应该很好

Answer 2

#container { 
margin: 0 auto; 
width: 1000px; 
background: url("bgbg.jpg"); 
border: 10px solid #000; 
} 

#content { 
float: left; 
width: 750px; 
padding: 0; 
background: url("bgbg.jpg"); 
border-right: 1px dashed #fff; 
display:block; 
} 

#sidebar { 
float: right; 
background: url("bgbg.jpg"); 
width: 200px; 
} 



<div id="container"> 

<div id="head">head 
</div>   


<div id="menuTop"> 
</div> 

<div id="content">ssss 
</div> 

<div id="sidebar">ffff 
</div> 
    <br style="clear:both;" /> 
<div id="footer"> 
</div> 
</div>