CSS divs don';t以适当的垂直顺序堆叠

CSS divs don';t以适当的垂直顺序堆叠,css,html,Css,Html,我有两个div。我希望id为“hor_rule”的一个显示在id为“header”的另一个下方 我的印象是这应该是自动发生的。我一定是犯了些愚蠢的错误 ---HTML文件--- 您的“标题”div是浮动的,宽度为64%。。。这意味着它下面的东西(没有应用宽度,或者宽度小于容器的36%)将向上滑动并填充该点。将“hor_规则”的宽度设置为高于36%的值 或者,您可以将“container”div设置为更大的宽度,或者将“container”div清除:两者都清除您的“header”div是浮动的,

我有两个div。我希望id为“hor_rule”的一个显示在id为“header”的另一个下方

我的印象是这应该是自动发生的。我一定是犯了些愚蠢的错误

---HTML文件---

您的“标题”div是浮动的,宽度为64%。。。这意味着它下面的东西(没有应用宽度,或者宽度小于容器的36%)将向上滑动并填充该点。将“hor_规则”的宽度设置为高于36%的值

或者,您可以将“container”div设置为更大的宽度,或者将“container”div
清除:两者都清除

您的“header”div是浮动的,宽度为64%。。。这意味着它下面的东西(没有应用宽度,或者宽度小于容器的36%)将向上滑动并填充该点。将“hor_规则”的宽度设置为高于36%的值


或者,您可以将“container”div设置为更大的宽度,或者将“container”div
清除:两者都清除

谢谢,我做到了。我还必须移除浮子:LeftThank,我做到了。我还必须移除浮子:左
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ARCS <~~ the title ~~></title>
    <style type="text/css" media="all">@import "css/styles.css";</style>
</head>
<body>
<div id="container">
    <div id="header">
    <span id="header_title"><~~ the title ~~></span>
</div>
<div id="hor_rule"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

#header { 
float:left; 
width:64%;
vertical-align:top;
margin:12px;
}

#header_title { 
font-family: Arial;
font-size:xx-large;
font-weight: bold;
}

#hor_rule{
    height:1px;
    background-color:#999;
}