[Résolu] probleme de footer par tancraft - page 1

Bonjour,

je ne parvient pas a garder le footer en dessous des aside en dessous de la navigation de coter. j'ai regarder les proposition des autres sujet mais sa fait du fixe. Je souhaiterais que meme en redimensionnant cela reste en dessous des menus. je vous mets une photo et tout le code de la page

<!DOCTYPE html>

<html>
  <head>
    <title>template base 1</title>
	



             <link rel="stylesheet" href="style.css" />
		
  <!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
  </head>
  
  <body>
  
    <header>
	  <h2> mon super site</h2>
	</header>
	
	<nav class="menuhaut">
	  <ul>
	     <li><a href="#">page1</a></li>
		 <li><a href="#">page2</a></li>
		 <li><a href="#">page3</a></li>
		 <li><a href="#">page4</a></li>
	  </ul>
	</nav>
	
	<section>
	
	  <article>
	    <p>Passage en minuscules
HTML vers TEXTE et TEXTE vers HTML
Générer 2 paragraphes
Générer 3 paragraphes
Générer 5 paragraphes
Générer 10 paragraphes
Générer 5 mots aléatoires
Générer 10 mots aléatoires
Générer 15 mots aléatoires
Générer 20 mots aléatoires
Générer 30 mots aléatoires
Générer 5 listes aléatoires
Générer 10 listes aléatoires
Générer 15 listes aléatoires
Générer 20 listes aléatoires
Générer 30 listes aléatoires
Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.

		</p>
	  </article>
	  
	  <aside>
	    <nav>
		<h1>titre</h1>
		  <ul>
	     <li><a href="#">page1</a></li>
		 <li><a href="#">page2</a></li>
		 <li><a href="#">page3</a></li>
		 <li><a href="#">page4</a></li>
	  </ul>
		</nav>
		
		<nav>
		<h1>titre</h1>
		  <ul>
	     <li><a href="#">page1</a></li>
		 <li><a href="#">page2</a></li>
		 <li><a href="#">page3</a></li>
		 <li><a href="#">page4</a></li>
	  </ul>
		</nav>
		
	  </aside>
     </section>
	
    <footer>
	  <A HREF="tancraftwork@free.fr">me contacter</A>
	</footer>
  </body>

</html>

et le css

body {
max-width: 960px;
margin: auto;
}

header {
position: relative;
width: 100%;
min-height: 100px;
background-color: #b0b0b0;
text-align: center;
}

.menuhaut a {
text-decoration: none;
font-size: 1.6em;
}

.menuhaut li {
display: inline-block;
margin-right: 40px;

}
.menuhaut a:hover {
color: red;
}

section {
width: 100%;
margin-bottom: 20px;
}
article {
display: inline-block;
vertical-align: top;
max-width: 740px;
background-color: #b0b0b0;
padding-left: 20px;
padding-right: 20px;
}

aside {
display: inline-block;
vertical-align: top;
float: right;
max-width: 200px;
text-align: center;
background-color: #b0b0b0;
}

aside li {
list-style-type: none;
margin-right: 30px;
}
aside a {
text-decoration: none;
}

aside a:hover {
color: pink;
}

footer {
width: 100%;
background-color: #b0b0b0;
}

je vous remercie d'avance pour une réponse.

tancraft