Redimensionar el blog -4 parte

En la entrada anterior os mostraba como van reduciéndose o ampliándose las columnas si vamos separando los contenidos, añadiendo paddings en los distintos contenedores que hay en una plantilla, hasta llegar al resultado final de ver la sidebar debajo de las entradas.

En aquel caso estaba claro que no cabía en el espacio disponible, por eso se había ido allá abajo, pero ¿y si lo que ves resulta ser esto?

Te preguntarás porqué no cabe si parece haber espacio entre ambas columnas.

En este caso lo que he modificado han sido los márgenes entre columnas, margin, dándole a todo los mismos 10 píxels que le di a los padding, aunque sin modificar éstos en esta ocasión.

Recordarás que decía en la otra entrada que había una distancia de 30 píxels de separación entre columnas.
Esos 30 píxels no están reflejados en ningún sitio. Son tan solo lo que sobra del espacio disponible, 660 píxels, al estar colocado el main a la izquierda del todo y la sidebar a la derecha del todo, mediante los float.
Al decirle que deje un margen de 10 píxels por cada lado, las columnas, a diferencia de lo que sucedía con el padding, se han desplazado 10 píxels hacia el centro, con lo cual sólo quedan 10 de aquellos 30, pero, además, cada una de ellas necesita 10 píxels libres por el centro. Al haber sólo 10 píxels disponibles, la sidebar se va al fondo a buscarlos.

Hoy no volveré a poner todas las capturas que hice con los paddíngs. Tan sólo os mostraré un par de cosas que teneis que tener en cuenta.

En primer lugar, este es el aspecto del blog sin modificar. (Le he puesto fondos distintos a los de la entrada anterior, para que puedas compararlos si quieres).

Recordareis que al darle un padding a .post-body, el texto se separaba de los márgenes.
Sin embargo, dándole esos 10 pixels de margen a esta zona,

como podeis ver no se separa el texto, sinó el cuerpo entero de la entrada escrita.

Lo mismo sucede con las demás zonas. Puedes ver en este detalle del montaje de los distintos márgenes que he ido aplicando, como ninguno de ellos provoca que el título del gadget se separe del borde, cosa que se si lograba con el padding.