18067 sujets

Questions générales et questions de débutants

[résolu] Probleme float et superposition de div avec IE

Bonjour à toutes et à tous !

Je vous soumets un petit probleme :

Sous IE j'ai un div qui devrait "passer" sous un autre div flottant mais qui veut pas ... Sous FF no problem ... comme d'hab' !

le html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Arroenia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="dir.js"></script>
</head>

<body>
	<div id="conteneur">
		<div id="header"></div>

		<div id="menu"></div>
		<div id="frame"></div>
		<div id="contenu"></div>
		<div id="footer"></div>
	</div>

</body>
</html>


le css :

/* G E N E R A L */

*{margin:0;padding:0;}

body {
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background: #D6D6D6 url(images/bois.gif) repeat;
}

/* C O N T E N E U R */

#conteneur {
margin: 1em auto;
width: 750px;
text-align: left;
background-color: red;
border: 1px solid black;
}
	
/* H E A D E R */
	
#header {
height: 115px;
background-color: fuchsia;
}

/* M E N U */

#menu {
height: 30px;
background-color: green;
}

/* F R A M E */

#frame {
float: right;
overflow: auto;
width: 250px;
height: 100px;
background-color: yellow;
}

/* C O N T E N U */

#contenu {
width: 750px;
height: 200px;
background-color: aqua;
}

/* F O O T E R */

#footer {
clear: both;
height: 30px;
background-color: lime;
}


Et un exemple en ligne : içi

Merci d'éclairer mes lanternes parcque là je sèche ...
Modifié par barbe douce (27 Jun 2006 - 00:34)
Point numéro un : il n'y a pas de cédille au C de ici.

Point numéro deux : effectivement, le comportement normal de ton bloc #contenu est de passer sous le flottant : seuls le texte et les éléments en-ligne seront repoussés par le flottant.

Point numéro trois : Internet Explorer a toute une série de bugs liés à sa façon bien particulière de gérer les blocs, en particulier via la propriété interne HasLayout. En gros, c'est une propriété du moteur d'IE qui a pour valeur 0 (le bloc n'a pas le layout) ou 1 (le bloc a le layout). Cette propriété, lorsqu'elle a pour valeur 1, déclenche un certain nombre de problèmes (et dans certains cas précis, ça permet aussi de régler d'autres problèmes).

Point numéro quatre : il y a plusieurs propriétés qui confèrent le layout a un élément. Parmi celles-ci, le fait de donner une largeur ou une hauteur fixe (en pixels, points, pourcentages, etc.) à un élément.

Point numéro cinq : ton bloc #contenu est doté de layout via les propriétés de hauteur et de largeur que tu lui donnes.

Point numéro six : un bloc doté de layout pert la capacité à se glisser sous un flottant dans IE Win.

Solution : se débrouiller pour ne pas utiliser de largeurs ou de hauteurs fixes. Pour la largeur, ça devrait être simple : un élément de type bloc prend toujours le maximum de la largeur disponible dans le conteneur, donc pas la peine de spécifier une largeur. Pour la hauteur, je ne suis pas sûr que tu en aies besoin pour ta page (le contenu donnera la hauteur). Tu peux aussi utiliser une hauteur minimum (min-height) pour les autres navigateurs.

Si tu ne trouves pas de solution satisfaisante, il est toujours possible d'inclure le bloc flottant comme enfant du bloc #contenu.
Belle réponse bien fournie ... Merci à toi mpop (et désolé pour le cédille : c'est une mauvaises habitude dont je n'arrive pas à me défaire ...)

En attendant une réponse j'avais tester des trucs et était arrivé à un résultat en incluant le bloc flottant dans le bloc #contenu Smiley cligne

Mais les infos que tu me donne me permettent d'aller plus loin et je t'en remercie !

Un petit [résolu] s'impose donc

merci
@+
Sujet clos
Aller à