div numéro: hauteur ne pas étendre avec le contenu

Je suis en train de créer une page Web en utilisant CSS (Table moins) mais mon contenu principal ne s'étend pas avec le contenu s'il vous plaît vérifier mes codes html et css et me donner des solutions, Mercidiv numéro: hauteur ne pas étendre avec le contenu

<!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" /> 
<link rel="stylesheet" href="style/styles.css" type="text/css" /> 
<title>::Model::</title> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"> 
header 
</div> 
<div id="main"> 
<div id="left">left</div> 
<div id="right">right</div> 
</div> 
<div id="footer"> 
footer 
</div> 

</div> 
</body> 
</html>

code Css

body{ 
    margin:0px; 
    padding:0px; 
    height:auto; 
} 

#wrapper{ 
    margin:0px auto; 
    width:1000px; 
} 

#header{ 
height:50px; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 
} 

#main{ 
height:auto; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 

} 

#footer{ 
height:100px; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 
} 

#left{ 
border:#CCCCCC solid 1px; 
width:640px; 
padding:4px; 
float:left; 

margin-right:2px; 

} 
#right{ 
float:right; 
padding:4px; 

border:#CCCCCC solid 1px; 
width:320px; 


}

Merci encore

Source

2010-10-14 Thomas John

Que voulez-vous dire par « ne pas prolonger »? La barre de défilement verticale apparaît-elle? – Xion

pas de moyens d'extension, la hauteur ne s'incrémente pas avec le contenu –

il suffit d'appliquer overflow:auto; sur #main pour le faire envelopper ses enfants flottants. Jetez un coup d'oeil sur Floating image to the left changes container div's height

(Vous pouvez supprimer la règle height)

Source

2010-10-14 07:38:37 MatTheCat

Merci beaucoup pour votre grande aide –

mais cela ne fonctionne pas dans IE6, aucune idée? –

Vous avez flotta éléments dans votre document, qui, comme son nom l'indique signifie qu'ils flottent au-dessus de votre div « principale ». Par conséquent, il ne s'étend pas.

Facile à fixer cependant, il vous suffit de coller une « claire » dans.

votre code html devrait ressembler à ceci, notez la div supplémentaire.

<div id="main"> 
<div id="left">left</div> 
<div id="right">right</div> 
<div class="clearme"></div> 
</div>

Et ajoutez simplement ce qui suit à votre CSS.

.clearme{clear:both}

Plus se trouvent sur la propriété claire et son utilisation ici: http://www.tutorialhero.com/tutorial-64-css_clear_property.php

Source

2010-10-16 13:23:57

div numéro: hauteur ne pas étendre avec le contenu

Répondre

Questions connexes