Alinear divs horizontalmente

Les comento mi problemilla... Yo estaba muy feliz en la vida, porque logré armar mi primer sitio usando divs y CSS (excepto por una tabla, pero me pareció que tenía sentido en el lugar donde la puse...), y se veía correctamente en IE y FF (tal como quiere el cliente). Excepto por un detalle: el pie.

Como pueden ver acá, en IE me muestra todo en una sola línea, pero en FF el menú se ve más abajo y no guarda la misma línea que la línea del copyright.

Primero pensé que podía ser porque los márgenes agradaban algunos de los divs, e intenté ver cómo solucionarlo, pero el problema es que no encuentro dónde está el problema... ¿Alguien puede orientarme?

Este es el código del footer:

Código :

<div id="footer"><div id="pft">Copyright &reg; 2005 You Entertainment</div>
<div id="ft_menu">
    <ul>
      <li class="inline"></li>
      <li class="inline"><a href="index.htm" class="ft">Home</a></li>
      <li class="inline"><a href="ar_main.htm" class="ft">Artists</a></li>
      <li class="inline"><a href="am_main.htm" class="ft">Audio/Video</a></li>
      <li class="inline"><a href="nw_main.htm" class="ft">News</a></li>
      <li class="inline"><a href="ap_main.htm" class="ft">Appearances</a></li>
      <li class="inline"><a href="nr_main.htm" class="ft">Releases</a></li>
      <li class="inline"><a href="chat.htm" class="ft">Chat</a></li>
      <li class="inline"><a href="mst_main.htm" class="ft">Music Store</a></li>
      <li class="inline"><a href="about_us.htm" class="ft">About Us</a></li>
      <li class="inline"><a href="xt_main.htm" class="ft">Extras</a></li>
<li class="inline"></li></ul>
</div>
</div>

Este es el CSS para esa área:

Código :

/*Footer Area*/

#footer{
background:url(../images/ft_bg_def.gif);
height:50px;
width:780px;
margin:auto;
padding:10px;
}

#ft_menu{
float:right;
width:auto;
margin-top:8px;
text-align:right;
}

#pft{
float:left;
width:auto;
margin-top:8px;
}

/*Menu*/

ul.inline{
list-style-type:none;
}

li.inline {
display: inline;
padding-left: 5px;
}

a.ft:link,a.ft:active,a.ft:visited{
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}

a.ft:hover{text-decoration:underline;}

Gracias!!!

prueba con el margin-top del texto que tienes ahí, o con el mismo div...
lo pones a cero y verás como se queda pegado arriba e igualado a la altura de lo otro, otra idea es que metas todo en el mismo div, así ahorras código y quebraderos de cabeza...

A mi me pasa lo mismo acá: http://www.digit-services.com/consultoria.htm , el div izquierdo que contiene el menú y el de la derecha tienen el mismo margen pero aún así el de la derecha aparece más abajo.

Bien, ya vi el error es muy sencillo y el tipico problema del que empieza a posicionar con CSS. Los márgenes predeterminados.

El ul y el p tienen márgenes y padding propio, que son dados por el navegador (puede variar dependiendo del navegador). Por lo que es recomendable darle margin y padding propio.

Muy aparte, te felicito por el esfuerzo en la página, está bien alineada y tal. Se ve muy bien. Y como consejos, vi un ligero problema que puedes corregirlo, pues aún hay tiempo (no del proyecto en si, pero tu forma de utilizar las clases e ids).

• Estas creando código inncesario, y si es por gusto. Como ejemplo podemos ver el footer pusiste una clase inline a cada etiqueta li, y una clase ft a cada etiqueta a dentro de cada li. A esto se le llama código innecesario. Poco a poco podrás entender el por qué.
  
• No estas usando las etiquetas para lo que fueron creadas, sino estás usando estilos para reemplazarlas, y divs por doquier. Por ejemplo, no estás usando encabezados, .

Te ayudé armando éste footer. Miralo bien. Verás que es practicamente lo mismo, pero sin tantas clases y menos divs.


XHTML

Código :

<div id="footer">
<p id="copyright">Copyright ® 2005 You Entertainment</p>
<ul id="footer-menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="ar_main.php">Artists</a></li>
    <li><a href="am_main.php">Audio/Video</a></li>
    <li><a href="nw_main.php">News</a></li>
    <li><a href="ap_main.php">Appearances</a></li>
    <li><a href="nr_main.php">Releases</a></li>
    <li><a href="chat.php">Chat</a></li>
    <li><a href="mst_main.php">Music Store</a></li>
    <li><a href="about_us.php">About Us</a></li>
    <li><a href="xt_main.php">Extras</a></li>
</ul>
</div>

CSS

Código :

div#footer {
   background:#424242 url(../images/ft_bg_def.gif);
   height:50px;
   width:780px;
   margin:auto;
   padding:10px;
}

p#copyright {
   float:left;
   width:auto;
   margin:0;
   paddding:0;
}

ul#footer-menu {
   float:right;
   width:auto;
   margin:0;
   padding:0;
   text-align:right;
   list-style:none;
}

ul#footer-menu li {
   display:inline;
   margin:0;
   padding:0 0 0 5px;
}

ul#footer-menu a:link,
ul#footer-menu a:active,
ul#footer-menu a:visited {
   color: #FFF;
   font-weight:bold;
   text-decoration:none;
}

ul#footer-menu a:hover {
   text-decoration:underline;
}

Saludos y suerte!

PD: Lo mismo va para ti, marlinton.

Gracias, Neo_JP!!! La verdad es que soy conciente de que mi código no está muy optimizado, y lo cierto es que quiero mejorar en eso, así que tus consejos me vienen perfecto.

Nota aparte, para los todavía les parece más complicado: la verdad es que armar una página así es mucho más sencillo de lo que parece, y hay que andar corrigiendo muchas menos cosas que cuando uno arma algo con tablas. Y es mucho más rápido de lo que parece!!



[Editado] PD: lo leí atentamente y entendí bien donde estaban los cambios. Funciona perfecto!! (si, supongo que ya lo sabías, pero quería hacerte el reconocimiento... jajajaja )

Jeje, no hay problema Elke, felicidades y sigue trabajando

Volviendo a trabajar.....

the_NEO_JP, muchas gracias por tu explicación, tenía los valores margin sin definir.