Problema con pie de pagina y CSS

[Carol_84]

Hola: tengo una página en la que según la opción que eliga el usuario en un select, se deplegan hacia abajo una serie de campos, para introducir más datos. El problema que tengo es que a veces, dependiendo de la opcion, se pone encima del "pie de ´pagina" los campos...
En IE, me sale bien, pero en Mozilla, me ocurre eso.....
He probado a poner

<br>

pero el problema que tengo es que en IE aparece mucho espacio entre los campos y el pie de página, y en Mozilla me sale bien.
Lo que quisiera hacer es hacer que el pie de página se desplace hacia abajo, cuando aparezcan muchos campos.
Es decir hacer el pie de pagina dinamico.
El pie de la pagina en la pagina html es:

<div id="final">
<div id="pie_pagina">
<p><a href="http://validator.w3.org/check?uri=referer"><img src="../../img/HTML.bmp" alt="Valid HTML 4.01 Strict" height="26" width="80"></a>
<a href="http://jigsaw.w3.org/css-validator/"><img src="../../img/CSS.bmp" alt="Valid HTML 4.01 Strict" height="26" width="80"></a></p>
<p>Copyright &copy; 2007 willr Webdesign </p>

</div>
</div>
</body>
</html>

Mi CSS es:

#final {
width: 100%;
background: #333333 url(bg2.png) repeat-x;
font-size: 0.7em;
padding-top: 100px;}

#pie_pagina{
clear: both;
background: #333333;
text-align: center;
width: 650px;
color: #a0a0a0;
font-size: 0.8em;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 3%;
}

¿Alguien puede decirme como puedo solucionarlo?GRACIAS!!!