Float: Lo principal y lo secundario

Los blogs suelen tener una estructura clásica donde vemos el contenido principal a la izquierda y el contenido secundario a la derecha; en las plantillas de Blogger, están definidos como dos DIVs identificados como main-wrapper y sidebar-wrapper respectivamente pero, eso sólo es una convención y pueden tener cualquier otro ID.

Si se ven uno a un lado del otro es porque se les agrega la propiedad float con un valor left para el de la izquierda y un valor right para el de la derecha.

Hasta ahí, todo es normal, si pudieramos abstraernos del resto de las etiquetas, tendríamos un contenedor (en Blogger se llama content-wrapper) y los dos rectángulos interiores:

<div id="contenedor">
  <div id="principal"> ....... </div>
  <div id="secundario"> ....... </div>
</div>

En este ejemplo, el CSS diría algo así:

#contenedor {margin: 0 auto; width:515px;}
#principal {background-color: #456; float: left; width: 300px;}
#secundario {background-color: #234; float: right; width: 200px;}

Como los navegadores arman la página, leyendo las etiquetas de arriba hacia abajo y de izquierda a derecha, primero se ubica el DIV de la izquierda y luego el de la derecha; como el contenedor mide 515 pixeles de ancho y los contenidos 300 y 200, sobran 15 pixeles que es lo que se separan entre si.

Podría conseguir el mismo resultado haciendo que ambos flotaran a la izquierda y en ese caso, quedarían "pegados" y debería usar un margen de 15 pixeles para separarlos pero, si en lugar de colocarles float: left a ambos, les coloco float: right, las cosas cambian, la posición se invierte pese a que el HTML sigue siendo el mismo:

Esta es la característica principal de la propiedad float: deshace el orden natural de las etiquetas, re-ubicándolas.

¿Para que podría servir esto si bastaría cambiar el orden del HTML para que la sidebar apareciera a la izquierda?

<div id="contenedor">
  <div id="secundario"> ....... </div>
  <div id="principal"> ....... </div>
</div>
</div>

#contenedor {margin: 0 auto; width:515px;}
#principal {background-color: #456; float: right; width: 300px;}
#secundario {background-color: #234; float: left; width: 200px;}

Me parece que el punto clave es que el orden en que están las etiquetas es fundamental cuando se trata de optimizar un sitio ya que hay algo de sentido común, así como las personas leen de arriba hacia abajo y de izquierda a derecha, lo mismo ocurre con los motores de búsqueda y como estos motores ignoran las propiedades, si el HTML tiene "arriba" el contenido secundario (la sidebar por ejemplo) y debajo, el contenido principal (las entradas), lo secundario tendrá prioridad; es lo mismo que ocurriría con un periódico que colocara el titular debajo del artículo y no arriba.

Los motores de búsqueda no entienden de derechas e izquierdas, leen las cosas de manera secuencial, una debajo de la otra y se sabe que no son pacientes así que, simplemente, toman lo primero que encuentran y lo usan para indexar el sitio. Si lo que está primero, es lo secundario, el resultado podría no ser el mejor.

Si lo que queremos es tener una sidebar a la derecha en lugar de tener una a la izquierda, deberíamos colocar el HTML de modo natural, poner el contenido primero y luego el secundario y establecer las propiedades CSS para invertirlos gráficamente.

<div id="contenedor">
  <div id="principal"> ....... </div>
  <div id="secundario"> ....... </div>
</div>
</div>

#contenedor {margin: 0 auto; width:515px;}
#principal {background-color: #456; float: right; width: 300px;}
#secundario {background-color: #234; float: left; width: 200px;}