28173 sujets

CSS et mise en forme, CSS3

Width:100%; différence IE-FF

Bonjour!

Tout d'abord, merci pour ce super site.

Mon problème est le suivant:
Je veux avoir 3 divs:
-un à gauche de 180px
-un au centre remplissant l'espace restant au milieu
-un à droite de 180px

Voilà un aperçu de la page:
http://rivenhome.com/alsacreation/test.html

Sur IE (screen):
http://rivenhome.com/alsacreation/apercu_IE.gif

Sur FF:
http://rivenhome.com/alsacreation/apercu_FF.gif

Mon but est d'avoir un design extensible.
Lorsque la résolution est trop petite, le float de droite (#menu_droite) se met en dessus du centre sur IE. Cela me dérange aussi.

<!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">
<head>

<title>a</title>
<style type="text/css">
body{
width:auto;
height:auto;
}
#menu_gauche
{
	border:black 1px solid;

	width:180px;

	position:absolute;
	top:50px;
	left:10px;
}

#centre_et_droite /* Contient #menu_droite et #centre */
{
	border:yellow 2px solid;
	
	width:auto;
	
	position:absolute;
	top:50px;
	left:200px;
	margin-right:0px;
}

#menu_droite
{
	border:red 1px solid;
	
	width:180px;
	
	float:right;
}

#centre
{
	border:green 1px solid;
	margin-right:200px;
	
	clear:none;
}

.element_centre
{
	border:green 1px solid;

	width:100%;
}
</style>

</head>
<body>

<!-- DIV Menu Gauche -->
<div id="menu_gauche">
	MENU GAUCHE
</div>

<!-- DIV contenant le centre et la droite -->
<div id="centre_et_droite">

	<!-- DIV Menu Droite -->
	<div id="menu_droite">
		MENU DROITE
	</div>
	
	<!-- DIV Centre -->
	<div id="centre">
	
		<div class="element_centre">
			CENTRE BLOCK 1
		</div>
		<div class="element_centre">
			CENTRE BLOCK 2
		</div>
		
	</div>


</div>



</body></html>


Un petit coup de main ou une suggestion serait très apprécié.

Bonne soirée


Lynx
Sujet clos
Aller à