float menu superposition

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:

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:

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;
}

Utiliser la propriété clear sur ton pied de page devrait résoudre ton problème. Ex:
Code:

1 2 3 #pied_de_page { clear:both; }

merci :)

Je voulais aussi dire merci, car mon problème a été résolu grâce à la solution donnée plus haut. :D