[css] Design 2 colonnes: probleme avec IE

Version imprimable

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
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!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>

31/07/2006, 14h15
fallais

A mon avis c'est a cause des float ... IE les interprete TRES mal ...
Sinon les tableaux ca t'interesse pas ? :P

Edit : ton leftcontent ... faudrait pas le faire float: left; ?
31/07/2006, 14h20
DeezerD

Citation:

Envoyé par Elwyn

A mon avis c'est a cause des float ... IE les interprete TRES mal ...

Le truc c'est que si je réduis un peu la largeur de insideleft de quelques pixels, là ca passe.... mais je ne trouve pas ça très logique

C'est bon j'ai trouvé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<title>Francallais</title>
<link href="style_conduite.css" type="text/css" rel="stylesheet" />
<!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: left;
}
#rightcontent {
	background-color:#33CC00;
	width: 595px;
	float: right;
}
#insideleft {
	background-color:#006699;
	width:470px;
	float: left;
}
#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>

Voila :)

31/07/2006, 14h46
DeezerD

un GRAND merci à toi