I have two divs. I want one with id "hor_rule" to appear beneath the other with id "header".
I was under the impression that this should happen automatically. I must be making some silly error.
--- The HTML file ---
<!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>
--- The CSS File ---
@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;
}