float menu superposition

**keub51** · 10/04/2007, 18h33

bonjour tout le monde,

voila je fais mes debuts en css et j'ai un petit probleme :
- j'ai un menu flotant à gauche et mon contenu de page a sa droite end essous il y a le pied de page .

lorsque le contenu s'agrandit le pied de page descend avec lui
par contre lorsque c'est le menu qui s'agrandit le pied de page ne bouge pas et le menu passe dessus sous firefox mais pas sous internet explorer ...

comment je peux contouner ce probleme ?

voici mon code assez basique :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" /> 
 
 
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
       <div id="bar">
 
       </div>
 
 
 
	<div class="contenu">
 
 
	   <!-- Les menus -->
	    <div class="menu"> 
         </div>
 
	   <!-- Le corps -->
        <div id="corps">
        	 </div>	   
 
	</div> 
       <!-- Le pied de page -->
       <div id="pied_de_page">
 
       </div>
 
   </body>
</html>

et ma css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
body
{
   width: 704px;
   margin: auto;
   margin-top: 20px;   
   border : 2px solid black;
}
 
/* L'en-tête */
 
#en_tete
{
   width: 700px;
   height: 100px;
   background-image: url("images/head2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
    border : 2px solid black;
}
 
#bar
{
   width: 700px;
   height: 30px;
   margin-top:2px;
   margin-bottom: 10px;
   border : 2px solid black;
}
 
/* Le menu */
 
.menu
{
   float : left;
   width: 120px;
   margin-bottom: 5px;
   text-align:center;
   border : 2px solid black;
   margin-bottom : 5px;
}
 
/* Le corps de la page */
 
#corps
{  
   width: 563px;
   margin-left: 130px;   
   border: 2px solid black;
}
 
 
.contenu
{
 
 border: 2px solid black;
}
 
 
 
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   margin-top : 10px;
   width: 700px;
   background-image: url("images/down1.PNG");
   height : 80px;
   border: 2px solid black;
}