Modificando las plantillas (Tutorial 3: Sidebars)

JMiur

Con todo lo que hemos modificado, no tendremos problemas en agregar otra sidebar ancha debajo de las anteriores, utilizando siempre el mismo criterio, dándole un ID único que, en este caso será sidebar-inferior.

El haber "envuelto" todo dentro de un contenedor (sidebar-area)es lo que nos va a permitir que todo quede "encolumnado" sino, las flotaciones son impredescibles:

Agregamos entonces, la nueva sidebar y este sería el código completo:

<div id="sidebar-area">
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-derecha">
<b:section class="sidebar" id="sidebarderecha" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-izquierda">
<b:section class="sidebar" id="sidebarizquierda" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-inferior">
<b:section class="sidebar" id="sidebarinferior" preferred="yes" />
</div>
</div>

Y tendrá las mismas propiedades que sidebar-wrapper:

#sidebar-inferior {
float: right; /* flota a la derecha */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
width:390px; /* el ancho */ 
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Guardamos y eso es todo, todo habrá quedado acomodado correctamente [VER EJEMPLO]

Y al igual que en la entrada anterior, si queremos cambiar todo de lado, basta invertir los valores de las flotaciones de main-wrapper y de sidebar-area.

Y así podemos seguir una y otra vez, repitiendo los códigos, uno debajo del otro, combunando anchas con angostas con la única precausión de darle a cada una un ID único [VER EJEMPLO]

<div id="sidebar-area">

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes" />
</div>
<div id="sidebar-derecha">
<b:section class="sidebar" id="sidebarderecha" preferred="yes" />
</div>
<div id="sidebar-izquierda">
<b:section class="sidebar" id="sidebarizquierda" preferred="yes" />
</div>
<div id="sidebar-inferior">
<b:section class="sidebar" id="sidebarinferior" preferred="yes" />
</div>

<div id="sidebar-wrapper2">
<b:section class="sidebar" id="sidebar2" preferred="yes" />
</div>
<div id="sidebar-derecha2">
<b:section class="sidebar" id="sidebarderecha2" preferred="yes" />
</div>
<div id="sidebar-izquierda2">
<b:section class="sidebar" id="sidebarizquierda2" preferred="yes" />
</div>
<div id="sidebar-inferior2">
<b:section class="sidebar" id="sidebarinferior2" preferred="yes" />
</div>

</div>