no me queda bien el pie de página

La verdad es que es casi como el del ejemplo de divs de la web. Es una div que se llama pie y dentro hay 3 trozos, pero me passa que según la longitud del contenido me queda de una forma o de otra y además siempre hay uno de los trozos (a la izquierda) que queda pegada justo bajo el menú lateral...
Si todo està metido dentro del div que se llama pie ¿pq se me desmonta?

hoja de estilos
#pie {background-color:#F5F5F5; height: 65px; float:right;}
#pieuno {background-color:white; float:left; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px; -webkit-border-radius: 7px 0px 0px 7px;}
#piedos {background-color:#C6E2FF; float:left; width:550px;}
#pietres {background-color:white; float:left; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; -webkit-border-radius: 0px 7px 7px 0px;}
#pie li {list-style:none;font-size:12px;}
#pie a {color: black; text-decoration:none ; font-family:lucida sans unicode; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:silver ; text-decoration:underline ; background-color: white }
#pie a:active {color:silver}

html
<!-- inicio Pie -->
<div id="pie">
<div id="pieuno">
<ul><li><a class="enlaceuno" href="http://adoptivanet.info/foro" title="foro de adoptivanet.info">FORO</a></li><li><a class="enlaceuno" href="http://adoptivanet.info/quienes-somos.php">¿quienes somos?</a></li><li><a class="enlaceuno" href="http://adoptivanet.info/aviso-legal.php">aviso legal</a></li></ul>
</div>
<div id="piedos"><p1><a href="http://adoptivanet.info" title="volver a adoptivanet.info">ADOPTIVANET.INFO</a></p1><br/>
<p2 class="centrado"><a href="mailto: [correo eliminado]">contacta </a></p2></div>
<div id="pietres">
<ul><li><a href="http://adoptivanet.info/calendario/" title="agenda de actividades relacionadas con la adopción">AGENDA</a></li><!-- inicio volver arriba --><li><a href="#top">volver arriba</a></li><!-- fin volver arriba --><li><a href="http://adoptivanet.info/mapa-sitio.php">mapa de la web</a></li></ul>
</div><!-- fin Pie -->

Hola igualada solo deveras poner los pies a tu gusto un saludo

html


<div id="pie">
<div id="pieuno">
<ul><li><a class="enlaceuno" href="http://adoptivanet.info/foro" title="foro de adoptivanet.info">FORO</a></li><li><a class="enlaceuno" href="http://adoptivanet.info/quienes-somos.php">¿quienes somos?</a></li><li><a class="enlaceuno" href="http://adoptivanet.info/aviso-legal.php">aviso legal</a></li></ul>
</div>
<div id="piedos"><p1><a href="http://adoptivanet.info" title="volver a adoptivanet.info">ADOPTIVANET.INFO</a></p1><br/>
<p2 class="centrado"><a href="mailto: [correo eliminado]">contacta</a></p2></div>
<div id="pietres">
<ul><li><a href="http://adoptivanet.info/calendario/" title="agenda de actividades relacionadas con la adopción">AGENDA</a><li></li><!-- inicio volver arriba --><li><a href="#top">volver arriba</a><li></li><!-- fin volver arriba --><li><a href="http://adoptivanet.info/mapa-sitio.php">mapa de la web</a><li></li></ul>
</div>


css


#pie {background-color:#F5F5F5; height: 65px; float:left;width:800px;border:1px solid:·000000;}
#pieuno {background-color:white; float:left; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px; -webkit-border-radius: 7px 0px 0px 7px;}
#piedos {background-color:#C6E2FF; float:left; width:150px;}
#pietres {background-color:white; float:right; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; -webkit-border-radius: 0px 7px 7px 0px;}
#pie li {list-style:none;font-size:12px;}
#pie a {color: black; text-decoration:none ; font-family:lucida sans unicode; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:silver ; text-decoration:underline ; background-color: white }
#pie a:active {color:silver}

Hola igualada te corrijo esta linea y te quedara mejor un saludo
antes
#piedos {background-color:#C6E2FF; float:left; width:150px;}
haora
#piedos {background-color:#C6E2FF; float:left; width:160px;margin-left:170px;margin-right:170px;}

gracias, mñn me lo miro
pero ¿qué he puesto mal? el ancho del pie?

Hola si te fijas bien veras los fallos

el que nos mostraste primero

#pie {background-color:#F5F5F5; height: 65px; float:right;}
#pieuno {background-color:white; float:left; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px; -webkit-border-radius: 7px 0px 0px 7px;}
#piedos {background-color:#C6E2FF; float:left; width:550px;}
#pietres {background-color:white; float:left; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; -webkit-border-radius: 0px 7px 7px 0px;}

fallos
1
float:right;
y es float:left;

el pie es el div contenedor principal donde estarn todos los demas div pies y hay que llevarlo a nuestra izquierda

2
solo le pusiste al pie

height: 65px; altura

y necesita tambien el hancho que faltaba al pie
width:800px;

el border es opcional no estaba puesto yo te lo e puesto asi

border:1px solid:.000000;

pero es asi con la almoadilla # no con el punto . el . es para class como desees

border:1px solid:#000000;

3
el pietres

estaba asi

float:left;

i es float: right; para que no se amontonen los div

4
por ultmo las medidas del piedos eran grandes le di 160px
sume todas las medidas

pieuno 150
piedos 160
pietres 150
y lo que queda de 800px se lo di al piedos margin-left:170px;margin-right:170px; y son el total los 800px
si le pones un border de 1px # al pie deveras descontar 2 px al total para que quede en 800px

5 creo que te faltaba alguna atiqueta <li></li> de obertura o de cierre

el segundo

y este ba bien en pie border:1px solid:#000000; solo deves descontar 2px al total por ejempro en los margin 170 left y right del piedos serian 169 left y right 169


#pie {background-color:#F5F5F5; height: 65px; float:left;width:800px;}
#pieuno {background-color:white; float:left; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px; -webkit-border-radius: 7px 0px 0px 7px;}
#piedos {background-color:#C6E2FF; float:left; width:160px;margin-left:170px;margin-right:170px;}
#pietres {background-color:white; float:right; width:150px; margin:0px 0px 0px 0px; -moz-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; -webkit-border-radius: 0px 7px 7px 0px;}



un consejo con esto tienes suficiente en los css

border-radius : 7px 7px 7px 7px;

no es necesario todo esto para redondear las esquinas

-moz-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; -webkit-border-radius: 0px 7px 7px 0px;

ya que la mayoria no existen y son errores de codigo
aparte que sobrecargas la web, tiempo de carga, errores, y codigos no validos para tu web

y si crees que los enlaces de los tres div pies se salen del alto div pie y no te gusta como queda solo deves darle mas height al pie porque solo tiene 65px
un saludo

Bueno... hice algunas modifiaciones al código, pero sigue sin quedarme cómo quiero...
tengo dos versiones del pie colgadas pero me cuesta mucho ver las modificaciones pq cuando lo miro desde mi ordenador no se me recarga la hoja de estilos y tengo que entrar con otro navegador o mirarlo en otro ordenador, y es un rollo pq no lo veo de inmediato.
las dos versiones son estas:
http://adoptivanet.info/tramitando/espera.php
http://adoptivanet.info/tramitando/espera-novelas-adopcion.php
yo no veo bien ninguna de las dos... aquí se ve mejor http://adoptivanet.info/encasa/adopteca-juvenil.php , me gustaría que quedara así en todas las páginas, aunque el contenido fuera más largo... quisiera poner que el ancho del pie se modificara según el ancho que quede en la página... no me explico muy bien