tags:

views:

214

answers:

1

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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;
}
+4  A: 

your "header" div is floated and has a width of 64%... this means that something (without a width applied to it, or of a width less than 36% of the container) below it will slide up and fill that spot. set the width of "hor_rule" to something higher than 36%.

alternatively, you can set your "container" div to a greater width or have your "container" div clear: both;

Jason
Thanks, I did that. I also had to remove the float:left
Ankur
glad i could help :)
Jason