4-Modificar posición y tamaño de las cajas

Como ves, el cuerpo principal del blog lo forma una caja (color negro) que a su vez contiene dos cajas. La columna de la izquierda, donde están el "acerca de", los links, etc;(color rojo) y la de la derecha(color azul), donde se postea.

Ahora vamos a aprender a desplazar estas cajas y modificar su tamaño. Te aconsejo que antes te leas el post Propiedades de la caja .Abrimos la CSS y manos a la obra.

La caja grande (color negro del dibujo), la que contiene a las otras dos, viene definida en la CSS por la etiqueta "container".

.container {
position: relative;
width: 780px;
left: 50%;
margin:0px 0px 0px -390px;
border: 1px none #000000;
}

Vemos que define las propiedades de la caja (ver post). Width es el tamaño, left es la posición relativa (como está al 50% la caja estará centrada), Margin son los márgenes (vemos que todos son 0 excepto el inferior, porque es donde aparecerá el pié de tu blog donde pone lo de "blogs.ya.com es un servicio ofrecido por Ya.com") y border que son los bordes (como ves al darle el atributo "none" los bordes son transparentes. Por eso no vemos esta caja en nuestro blog.)

Primero vamos a mover la caja, y para eso cambiaremos el valor de "left".

Para desplazarla totalmente a la izquierda le daremos a left el valor de 40%. Quedaría así:

Si queremos desplazarlo a la derecha, entonces el valor de left será 60%:

Si queremos agrandar el tamaño de la caja debemos modificar el valor de width. Así quedaría si le diéramos un valor de 900px (en origen es de 780px)

En los siguientes capítulos veremos como modificar la posición relativa de las subcajas (larojay azul del dibujo), y aprenderemos a quitar los márgenes…Poco a poco es más fácil.