Modificando las plantillas (Tutorial 4: Flotaciones)

JMiur

[E]

Ya agregamos columnas a la derecha, a la izquierda, dobles, simples, las mezclamos, podemos seguir poniendo todas las que se nos ocurra pero la realidad es que solemos ser menos exquisitos y nos limitamos a una o dos así que simplifiquemos el proyecto, hagamos de cuenta que empezamos con el Modelo original de la Plantilla Mínima y queremos agregar sólo una segunda sidebar.

Ampliamos el ancho general de outer-wrapper, header-wrapper y footer-wrapper a 980 pixeles y el de main-wrapper a 560 pixeles exactamente igual que en el primer tutorial y ahora disponemos de los 390 pixeles restantes para dividirlos en dos sidebars.

Por defecto, sólo tenemos una columna en la plantilla así que le agregamos el código de la segunda, copiándolo y pegándolo:

<div id="sidebar-area">
  <div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
      .......
    </b:section>
  </div>
  <div id="sidebar-nueva">
    <b:section class="sidebar" id="sidebarnueva" preferred="yes" />
  </div>
</div>

Y el CSS que sólo es una variación de los anteriores:

#sidebar-area {
  float: right; /* flota a la derecha */
  width: 390px; /* es ancha porque contendrá las dos sidebars */
}

#sidebar-wrapper { /* es la original */
  float: right; /* flota a la derecha */
  margin-left: 5px; /* margen izquierdo */
  overflow: hidden;
  width: 190px;
  word-wrap: break-word;
}

#sidebar-nueva { /* es la nueva */
  float: right; /* flota a la derecha */
  margin-left: 5px; /* margen izquierdo */
  overflow: hidden;
  width: 190px;
  word-wrap: break-word;
}

Guardamos y ya está, tenemos dos sidebars, una al lado de la otra [VER EJEMPLO]

Tal como lo hemos agregado, la original (sidebar-wrapper) será la que está más a la derecha del blog; si quisiéramos que fuera la otra, deberíamos invertir el orden del código:

<div id="sidebar-area">
  <div id="sidebar-nueva">
    <b:section class="sidebar" id="sidebarnueva" preferred="yes" />
  </div>
  <div id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
      .......
    </b:section>
  </div>
</div>

Para invertir la posición y colocar las sidebars a la derecha basta invertir la flotación de main-wrapper y de sidebar-area:

Y bueno, sí, ya sé, falta una tercera opción, nos gusta complicarnos la vida y queremos poner una a la derecha y otra a la izquierda. Para eso, debemos cambiar el esquema, olvidarnos del contenedor sidebar-area y hacerlas flotar en diferentes direcciones.

Pero, aquí debemos entender algo, los navegadores van "dibujando" la página web de manera secuencial, es decir, crean los famosos rectángulos en un cierto orden, leyendo de arriba hacia a abajo y la flotación sólo es una propiedad. A ver si puedo mostrarlo, veamos este código:

<div id="main-wrapper">
  ... el área de posts ...
</div>

<div id="sidebar-wrapper">
  ... la sidebar ...
</div>

main-wrapper puede flotar a la derecha o a la izquierda, lo mismo puede ocurrir con sidebar-wrapper. Es más, ambas pueden flotar hacia el mismo lado y, en todos los casos, el elemento que contiene los posts se mostrará primero, a la izquierda o a la derecha de la pantalla pero primero, cuando se complete su carga se mostrará la sidebar [VER EJEMPLO]

Si se invierte el orden, la sidebar se cargará primero pero el resultado final, será el mismo [VER EJEMPLO]

<div id="sidebar-wrapper">
  ... la sidebar ...
</div>

<div id="main-wrapper">
  ... el área de posts ...
</div>

Cuando colocamos dos elementos flotantes, uno hacia la derecha (right) y otro hacia la izquierda (left), todo es sencillo de entender pero, cuando hacemos que ambos floten en la misma dirección, se nos queman lo papeles y hay que ponerse a pensar y eso es justo lo que no hacen los navegadores y tampoco deben hacerlo.

El navegador lee la instrucción que le dice, cree un rectángulo de tal dimensión a la izquierda de la pantalla. Obedientemente, lo hace y luego, se olvida del tema así que sigue con la siguiente instrucción que le dice: cree OTRO rectángulo de cierta dimensión y colóquelo a la izquierda ¿de la pantalla? No, a la izquierda del espacio que le dejó el rectángulo anterior y si no entra, pafffff lo coloca debajo.

En resumen, si dos elementos flotan a la izquierda, el primero aparecerá a la izquierda pero el segundo se mostrará a la derecha. Si dos elementos flotan a la derecha, el primero aparecerá a la derecha y el segundo a la izquierda ¡Cosa de magia!

Así que, para poner una sidebar a cada lado de los posts, deberíamos reordenar el código:

<div id="sidebar-wrapper1">
  <b:section class="sidebar" id="sidebar1" preferred="yes">
    .......
  </b:section>
</div>

<div id="main-wrapper">
  <b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
  </b:section>
</div>

<div id="sidebar-wrapper2">
  <b:section class="sidebar" id="sidebar2" preferred="yes">
    .......
  </b:section>
</div>

Y el CSS:

#sidebar-wrapper1 {
  float: left; /* flota a la izquierda */
  overflow: hidden;
  width: 190px;
  word-wrap: break-word;
}

#main-wrapper {
  float: left; /* flota a la izquierda */
  margin: 0 10px; /* la separación entre los bloques */
  overflow: hidden;
  width: 560px;
}

#sidebar-wrapper2 {
  float: left; /* flota a la derecha */
  overflow: hidden;
  width: 190px;
  word-wrap: break-word;
}

La separación entre los tres rectángulos lo controlamos con el margen de todos ellos o, como en el ejemplo, con la propiedad margin del rectángulo central, el que contiene los posts [VER EJEMPLO]

REFERENCIAS:

Modificando las plantillas (Tutorial 1: Anchos)