laboratorioWeb: Consejos CSS 1

Con esta entrada empezamos lo que a priori queremos que se convierta en una sección imprescindible para las personas que están empezando a maquetar con CSS, o que simplemente tienen un problema y no saben como solucionarlo.

Bienvenidos a laboratorioWeb




La primera entrega la quería dedicar a uno de los mayores quebraderos de cabeza de la maquetación sin tablas: El posicionamiento de las columnas dentro de nuestra web.

Partamos de la base que queremos la estructura clásica de un blog: una cabecera con un menú de navegación, una columna a la izquierda donde alojaremos nuestro contenido principal, una columna a la derecha con diferentes links, imagenes, etc, y por último un foot para ubicar el copyright de la web.

Para ello debemos tener claro dos cosas: la jerarquia de las capas div y el uso de la propiedad float.


Vamos pues a darle caña al archivo HTML:


<title> Maquetación a dos columnas</title>



<div id="main">

<div id="head">

</div>

<div id="contenido">

<div id="columna_izq">

</div>

<div id="columna_derecha">

</div>

</div>

<div id="foot">

</div>
</div>


Con la estructura del HTML ya creada, vamos a posicionar los elementos mediante la hoja de estilos CSS.


BODY {

font: 8px Arial, Helvetica, sans-serif;

}

#main{

width: 800px;

margin: 0 auto;

}

#head{

width: 800px;

background-color: #d0d0ff;

height: 60px;

}

#contenido{

margin: 10 0 10 0px;

}

#columna_izq{

width: 500px;

float:left;

background-color: #999999;

}


#columna_der{

width: 300px;

float:left;

background-color: #999999;

}


#foot{

background-color: #cccccc;

padding: 3 10 3 10px;

text-align:right;

}


Hay que tener en cuenta dos parametros: el ancho - width, y el float.

El primero define que distancia total tendrá nuestro div, y el float define que posición ocupara en la página.

En la id columna_izq apreciamos que la anchura fija tiene un total de 500px y una posicion fijada en la parte izquierda del contenedor #contenido con un float: left, mientras que la columna_der tiene una posición total de 300px y que tambien está alineada a la izquierda mediante un float:left.

El ancho total de ambas columnas hace un total de 800px, que es lo que hemos establecido previamente en la anchura total del #main.

La explicación a porqué usar dos float: left, es la siguiente:

Los elementos div siguen una jerarquia en el código fuente que los obliga a colocarlos en orden descendente según lo establecido por el código, pero al aplicarle la propiedad float, les obligamos a que "fluyan" de la manera que nos es conveniente.

Por lo tanto al indicarle a la columna de la derecha que fluya hacia la izquierda, le estamos obligando a colocarse a la derecha en lugar de abajo.

Quizás suene muy profesor Plómez, pero con algo de práctica se le coge muy rápido el truquillo.