2009-06-01 10 views
0

私は2つのdivを持っています。私はid "hor_rule"を持つものがid "header"の下に現れるようにしたい。CSS divは適切な垂直方向に積み重ねません

私はこれが自動的に起こるはずであるという印象を受けました。私はいくつかのばかげた誤りをしているに違いない。

--- HTMLファイル---

<!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> 

--- CSSファイル---

@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

あなたの "ヘッダー" のdivを浮かべおよび64%の幅を有しています...これは、その下に何か(その幅が適用されていないか、コンテナの36%未満の幅)がスライドしてその場所を埋めることを意味します。 「hor_rule」の幅を36%以上に設定します。

代わりに、あなたは私がそれをした、あなたの「コンテナ」のdiv clear: both;

+0

おかげでより大きな幅にあなたの「コンテナ」のdivを設定したりすることができます。私もフロートを取り除かなければならなかった:左 – Ankur

+0

私は助けることができてうれしい – Jason

関連する問題