2009-06-01 9 views
0

두 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

당신의 "헤더"사업부가 떠내려와 64 %의 폭을 가지고있다 ... 이것은 무언가 (너비가 적용되지 않거나 컨테이너의 너비가 컨테이너의 36 % 미만인 경우)가 아래로 미끄러 져 그 자리를 채우는 것을 의미합니다. "hor_rule"너비를 36 % 이상으로 설정하십시오.

양자 택일로, 당신은 내가 그것을했다, 당신의 "용기"DIV clear: both;

+0

감사를 더 큰 폭으로 "용기"사업부를 설정하거나 할 수 있습니다. 나 또한 부유물을 제거해야했다 : – Ankur

+0

내가 도와 줄 수있는 것을 왼쪽 :) – Jason

관련 문제