28173 sujets

CSS et mise en forme, CSS3

Design 2 colonnes: probleme avec IE

salut à tous
j'ai un soucis avec un design 2 colonnes qui ne veut passer sous IE (par contre pas de soucis avec FF)
La page se décompose comme suit:
Un bloc de page (750px) qui contient 2 blocs (155px + 595 px = 750px) Jusqu'ici pas de probleme.
Dans le bloc de 595px je crée 2 colonnes (125px + 470px = 595px) et là probleme, sous IE le bloc de 470px ne s'encastre pas comme il faut et passe en dessous de tout le reste.
Mathématiquement c'est bon et ca passe bien sur FF
Quel est le soucis? merci

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MA PAGE</title>
<style type="text/css">
#page{	
	background-color:#fff;
	width:750px;
	margin: 0 auto;
}
#leftcontent {
	background-color:#99CC33;
	width: 155px;
	float: right;
}
#rightcontent {
	background-color:#33CC00;
	width: 595px;
	float: right;
}
#insideleft {
	background-color:#006699;
	width:470px;
}
#insideright{
	background-color:#ff0033;
	float:right;
	width:125px;
}

</style>
</head>
<body>

<div id="page">

  <div id="rightcontent">
    <div id="insideright"> COLONNE DROITE </div>
    <div id="insideleft">COLONNE GAUCHE</div>
  </div>
  
  <div id="leftcontent"> MENU 
  </div>

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


upload/1009-Untitled-1.gif
Modifié par BuddyMan (31 Jul 2006 - 14:05)
hello,

J'ai remarqué que tu codes "à l'envers" en inversant la gauche et la droite. Smiley smile

Si je reprend ton code : 

<div id="page">

  <div id="rightcontent">
    <div id="insideright"> COLONNE DROITE </div>
    <div id="insideleft">COLONNE GAUCHE</div>
  </div>
  
  <div id="leftcontent"> MENU 
  </div>

</div>

Tu places le bloc de droite "rightcontent" d'abord puis "leftcontent" le bloc de gauche, le sens de lecture n'est pas bon.

Si tu replaces des blocs tu obtiendras :

<div id="page">

	<div id="leftcontent">MENU</div>
	
	<div id="rightcontent">
		<div id="insideleft">COLONNE GAUCHE</div>
		<div id="insideright">COLONNE DROITE</div>
	</div>

</div>


"leftcontent" en premier puis "rightcontent" en second.

Essaies avec ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MA PAGE</title>
<style type="text/css">
#page{	
	background-color:#fff;
	width:750px;
	margin: 0 auto;
}
#leftcontent {
	background-color:red;
	width: 155px;
	float: left;
}
#rightcontent {
	background-color:green;
	width: 595px;
	float: left;
}
#insideleft {
	background-color:yellow;
	width:470px;
	float:left;
}
#insideright{
	background-color:aqua;
	width: 125px;
	float:right;
}

</style>
</head>
<body>

<div id="page">

	<div id="leftcontent">MENU</div>
	
	<div id="rightcontent">
		<div id="insideleft">COLONNE GAUCHE</div>
		<div id="insideright">COLONNE DROITE</div>
	</div>

</div>

</body>
</html>
Sujet clos
Aller à