28217 sujets

CSS et mise en forme, CSS3

Float right à côté d'un clear right

Bonjour à tous!
Voilà je suis confronté à un soucis sous IE6 et 7 lors de l'utilisation de FLOAT ET CLEAR.

Voici le résultat que je souhaite obtenir (parfait sous IE8 et FF):

http://www.tomasz.be/ff.png

et sous IE 6 et 7 voici ce que j'obtiens:

http://www.tomasz.be/ie.png

Le problème se situe au niveau du DIV entouré en rouge, il devrait venir se positionner plus bas, c'est-à-dire comme ceci:

http://www.tomasz.be/ok.png

Et voici mon code:


<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test</title> 
<style type="text/css"> 
#global { 
width: 950px; 
margin: 0 auto; 
overflow: hidden; 
zoom:1;
}
#haut-droit { 
float: right; 
width: 300px; 
margin: 0 0 0 10px; 
padding: 10px; 
border: 1px solid #000; 
background: #66FF99; 
position: relative; 
z-index: 10; 
} 
#droit { 
float: right; 
clear:right;
width: 200px; 
padding: 10px; 
background: #66FF66; 
} 
#contenu { 
margin-right: 220px; 
padding: 10px; 
text-align: justify; 
border: 1px solid #000; 
background: #66FF33; 
} 
#footer { 
clear: both; 
padding: 10px; 
border: 1px solid #000; 
background: #66FF00; 
} 
.essay {
float:right;
width:100px;
border:1px solid #ff0000;
}
</style> 
</head> 
<body> 
<div id="global"> 
	<div id="haut-droit"> 
	<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
	</div>
	<div id="droit">
	<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
	<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
	</div> 
	<div class="essay">xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br /></div>
	<div id="contenu"> 
		<h1 style="width:500px;">test</h1>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
	</div> 
	<div id="footer"> 
	<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
	<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p> 
	</div> 
</div>
</body> 
</html>


Merci à ceux qui pourront m'aider Smiley smile
Modifié par tomasz (08 Apr 2010 - 18:39)
Sujet clos
Aller à