Problème avec Vertical Align

Bonjour à tous j'ai ce code sur ma page pour centrer une animation Flash
Mais je souhaiterai y ajouter un footer et là 2 soucis :
Comment spécifier en vertical align que le footer doit se positionner en bas de la page et comment spécifier sa hauteur en % ?

body {
     margin: 0; 
     text-align: center;
	 background:#000000
	 
}
#flashcontent {
     margin-left: auto;
     margin-right: auto;
     width: 1000px; 
     text-align: left; 
	 }
	 


* {
	margin: 0;
	padding: 0;
}


html, body { 
     height:100%;
     width:100%;
}

#outer {
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
	
}

#container {
	display:table-cell;
	vertical-align:middle;
}

#inner {
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	background:#FFFFFF
}
</style> 

<!--[if IE ]>
   <style type="text/css">
	#container {
   height: 1px;
   position:relative;
   top:50%
}

#inner {
   position:relative;
   top:-50%;
    background:#000000
}
   </style>
<![endif]-->

Merci de votre aide

Bonjour,
La propriété vertical-align ne sert pas à ça.

Pour répondre à ta problématique, j'opterais pour positionner les éléments :
- contenu global en position relative ;
- et footer en position absolue, calé en bas du conteneur global.

Et concernant la valeur en %, il faudra d'abord songer à donner une hauteur au conteneur global.

Bonjour j'ai un peu ramer avant de venir vous redéranger mai sje n'y arrive pas

voici mon code Css :

/* -- Page styling, unrelated to centering ----- */
body {
     margin: 0; /* to avoid margins */
     text-align: center; /* to correct the centering IE bug*/
	 background: #c0baba
}
#flashcontent {
     margin-left: auto;
     margin-right: auto;
     width: 1000px;    /* you must change this number to the width of your flash movie in pixels */
     text-align: left; /* to realign your text */
	 }
	 
/* -- Code for vertical centering ----- */

* {
	margin: 0;
	padding: 0;
}

/* macs won't see this! \*/
html, body { 
     height:100%;
     width:100%;
}
/* END mac */

#outer {
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

#container {
	display:table-cell;
	vertical-align:middle;
}

#inner {
	text-align: center;
	margin-left:auto;
	margin-right:auto;
}

#foot {
background-color : #c17021;
position : absolute;
width : 100%;
height : 100%;
visibility : visible;
}

</style> 

<!--[if IE ]>
   <style type="text/css">
	#container {
   height: 1px; /* required for IE to properly center vertically */
   position:relative;
   top:50%
}

#inner {
   position:relative;
   top:-50%;
}
   </style>
<![endif]-->

Et voici mon code Html

<div id="outer">
	<div id="container">
		<div id="inner">
       <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600"><param name="movie" value="index_fr.swf" />

<object type="application/x-shockwave-flash" data="index_fr.swf" width="1000" height="600"><!--<![endif]-->
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="swfobject/noflash.jpg" alt="Obtenez Adobe Flash player" /></a></p>
<!--[if !IE]>--></object> <!--<![endif]--></object>
	<div id=""foot">	
    </div>
	</div>
    </div>

</div>

Mon footer n'apparait pas malgré mes tentatives...
Si quelqu'un veut bien me venir en aide ca serait super sympa
Merci beaucoup

Personne pour un ptiti coup de main ?
:)