Alinear los distintos botones del footer

k_nelita pregunta cómo poner los distintos botones que ofrecen Facebook, Twiiter y otros servicios, debajo de las entradas, que se vean en una línea y que no se descompagine todo. Muchas veces me preguntan lo mismo y lo cierto es que no hay una solución universal porque todo depende de qué tipo de cosas se agregan, de cuales son sus tamaños y propiedades, etc, etc.

Algunos, sólo son enlaces, otros, iframes, otros scripts, otros, códigos especiales como los de Facebook o Google. Hay tantas posibilidades como sitios y servicios existen y por lo tanto, cada caso es diferente pero la base es siempre la misma, debemos saber qué ponemos y qué hace eso que ponemos ¿es un bloque y por lo tanto se generará un salto de línea?, ¿flota?, ¿tiene bordes? Demasiadas preguntas.

Normalmente, basta con usar propiedades como float y margin para acomodarlos pero, eso no siempre resulta y entonces, debemos volver a las fuentes y usar una simple tabla para evitar dolores de cabeza (Ver Malditas Tablas: 1, 2, 3, 4, 5).

Una tabla es como una hoja cuadriculada donde hay filas y columnas. En este caso, sólo requerimos una fila y una cantidad indeterminada de columnas; básicamente, esto es una tabla con tres columnas:

<table>
  <tr>
    <td> la celda de la izquierda </td>
    <td> la celda del centro </td>
    <td> la celda de la derecha </td>
  </tr>
</table>

¿Qué hace que usar estas etiquetas facilite las cosas? Que están pensadas para "acomodar" contenidos diversos y adaptarse a ellos.

En este ejemplo, voy a poner cinco contenidos diferentes:

el botón de Twitter que es un enlace y un script

<a class="twitter-share-button" data-count="horizontal" data-lang="es" data-via="Vagabundia" data-url="http://vagabundia.blogspot.com/" data-text="Vagabundia en Blogger" href="http://twitter.com/share" target="_blank">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

el botón Me Gusta de Facebook con un iframe al que dimensionaré para que no sea tan ancho y tan alto:

<iframe src='http://www.facebook.com/plugins/like.php?href=http://vagabundia.blogspot.com/&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=likefont=tahoma&amp;colorscheme=light' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:25px'></iframe>

un enlace común a las etiquetas del blog y un par de imágenes cualesquiera.

Ahora, armaré la tabla:

<table class="tablapostfooter" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      ....... el código de Twitter .......
    </td>
    <td style="padding-top: 17px;">
      ....... el código de Facebook .......
    </td>
    <td>
      ....... una imagen .......
    </td>
    <td>
      ....... enlaces a etiquetas .......
    </td>
    <td>
      ....... otra imagen .......
    </td>
  </tr>
</table>

Y le agregaré propiedades elementales:

<style>
  .tablapostfooter {margin: 0 auto; border:none; width: 100%;}
  .tablapostfooter td {text-align: center; vertical-align: top;}
</style>

Lo que dará por resultado esto:

Tweet

Blogger,HTML

Por defecto, la tabla tendrá la altura de la celda más alta y los contenidos quedarán alineado verticalmente en su parte superior (vertical-align:top); luego, corregimos esos detalles usando padding-top si quermos "moverlos" individualmente una cantidad de pixeles que dependerán del contenido o bien usamos vertical-align:middle para centrarlos.

Obviamente, no es la única solución porque jamás hay una sola solución pero es simple y no requiere andar peleando con propiedades CSS que tal vez, no comprendemos.

Las tablas son odiadas por algunos pero, son como las lentejas: si quieres las usas y si no, las dejas.