Les divs CSS ne s'empilent pas dans l'ordre vertical approprié

J'ai deux divs. Je veux un avec id "hor_rule" pour apparaître sous l'autre avec l'id "en-tête".Les divs CSS ne s'empilent pas dans l'ordre vertical approprié

J'avais l'impression que cela devait se faire automatiquement. Je dois faire une erreur stupide.

--- Le fichier 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>

--- Le fichier 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; 
}

Source

2009-06-01 Ankur

votre div "en-tête" est flottante et a une largeur de 64% ... cela signifie que quelque chose (sans que la largeur soit appliquée, ou d'une largeur inférieure à 36% du récipient) en dessous glisse vers le haut et remplisse cet endroit. définir la largeur de "hor_rule" à quelque chose de plus élevé que 36%.

alternativement, vous pouvez définir votre « conteneur » div à une plus grande largeur ou avoir votre « conteneur » div clear: both;

Source

2009-06-01 06:46:25 Jason

Merci, je l'ai fait. J'ai également dû enlever le flotteur: gauche – Ankur

heureux je pourrais aider :) – Jason

Les divs CSS ne s'empilent pas dans l'ordre vertical approprié

Répondre

Questions connexes