[W3C] footer perdu dans les bois. [Résolu]

[ShaunY]

Bonjour, j'ai un problème majeur d'afichage avec mon footer sous firefox.
Mon footer se retrouve en dessous du texte à coté de mon menu c'est la première fois que je fais un template valide W3C avec du <div> tag et un menu verticale donc j'ai pas le (Hack) pour fix le footer en dessous du menu et du texte.
Voiçi une parti du code.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="menu">
<menu>
<li><a href="index.html">Acceuil</a></li>
<li><a href="#">Événement</a></li>
<li><a href="#">Boutique</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Partenaire</a></li>
<li><a href="#">Contact</a></li>
</menu>
</div>
<div class="text"><em>text here</em></div>
<!--Début du Footer-->
<div class="footer"><p>Copyright Vultus &copy; 2011 All Rights Reserved. 
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" /></a></p>
</div>
<!--Fin du Footer-->

CSS corespondant au code HTML au dessu:

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
 
.menu {
	width: 180px;
	height: auto;
	background-color: #ffffff;
	text-align: left;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #666666;
	font-weight: bold;
}
.menu a:link {
	text-decoration: none;
	color: #666666;
	}
.menu a:visited {
	text-decoration: none;
	color: #666666;
	}
.menu a:hover {
	text-decoration: none;
	color: #333333;
	}
.menu a:active {
	text-decoration: none;
	color: #666666;
	}
.text {
	width: 760px;
	height: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #990000;
	text-align: left;
	Background-color: #ffffff;
	float: right;
	margin-right: 10px;
	margin-left: 10px;
}
.footer {
	width: 960px;
	height: 35px;
	background-color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	color: #990000;
	text-align: center;
}

Je ne voie pas le problème en revoyant mon code j'ai aissayer la manipe de Créer un block <div> avec le text et le menu, mais sa ne fonctionne pas et je cherche une solution valide W3C à mon problème.
Merci d'avance pour vos réponse.

[NoSmoking]

Bonjour,
ajoutes un clear:both; dans le style du footer.
Cela résoudra ton problème mais pas les autres problèmes, notamment sur le redimensionnement de la page.

[ShaunY]

Meci de ta réponse en fais je l'avais aissayer hier et sa ne semblais pas fonctionné, mais je doit avoué que j'avais fais d'autre modification aussi valid W3C qui surment créais une autre erreur d'affichage.
Il est fais fixed width et height: auto; pour le menu et le text.
Le header et le footer sont fixed Width et height.
Voiçi a quoi resemble le résulta qui est uniforme dans tout les web browser et surtout valide W3C sans aucun CSS hack.
http://vultus.fr/test/