Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
¿Recuerdas los dos diseños que hicimos con cabecera, tres columnas dos de ellas fijas y la central variable y un pie?. Lo habíamos hecho de forma sencilla y usando float también de forma sencilla.
Ahora vamos a complicarlo a base de bien y hacerlo de una forma más compleja. Más que nada por jugar un poco con float y ver algunas de sus posibilidades.
Al igual que hicimos en el diseño con float, la cabecera y el pie no tienen truco especial.
La cabecera va en un div normalito, ocupando el 100% del ancho de la pantalla y podemos ponerle todo el colorido y márgenes que queramos.
Con el pie tres cuartos de lo mismo, con la cosa de que le pondremos un clear:left, como ya hicimos anteriormente, para asegurarnos que queda debajo de las tres columnas.
Es importante, para que salga bien en internet explorer y firefox, que pongamos margin y padding a 0 en los div de las columnas. Si no, la diferente forma de medir el tamaño de las cajas de ambos exploradores nos dará problemas.
Primero ponemos un div para la columna central, ocupando el 100% del ancho y con float:left. Esto es fácil y hará que el div ocupe toda la pantalla a lo ancho. Vamos a llamar a este div contenedor y más adelante veremos por qué no le llamamos columna central.
En el código html situaremos la columna izquierda en un div detrás del div contenedor. Le daremos un ancho fijo, por ejemplo de 100px y le pondremos también float:left. Como el 100% del ancho de la pantalla está ocupado por el div contenedor, el navegador intentará situar el div columna izquierda a la derecha del div contenedor. Como no cabe, lo pondrá debajo del mismo.
Aquí viene la primera virguería. Si a este div columna izquierda le damos un margin-left del menos 100%, se situará justo encima del div contenedor, en su parte izquierda. Es decir, se desplaza hacia la izquierda un 100% de la pantalla, situandose en el sitio que lo queremos.
En cuanto a la columna derecha, también la ponemos con float:left y un ancho fijo de digamos 100px. Como tampoco cabe y se sale por la derecha del navegador (el navegador la pinta en la línea siguiente), la desplazamos con margen negativo exactamente su ancho, es decir margin-left:-100px. También negativo. Esto hará que se superponga al contenedor, pero en su lado derecho.
<html>
<head>
<style>
* {margin:0px; padding:0px;} /*para evitar
problemas con navegadores */
#contenedor {width:100%; float:left;}
#columna_izquierda {width:100px; float:left; margin-left:-100%;}
#columna_derecha {width:100px; float:left; margin-left:-100px; }
</style>
...
<div id="contenedor">contenedor</div>
<div id="columna_izquierda">columna izquierda</div>
<div id="columna_derecha">columna derecha</div>
Esto nos dará el resultado de la siguiente página, aunque para que quede más claro he añadido bordes y un poco de color. Vemos que el contenedor, de borde negro, ocupa su 100% del ancho del navegador, mientras que la columna izquierda, de rojo, se ha superpuesto en el lado izquierdo. La columna roja "tapa" el texto del contenedor, de hecho no se ve la palabra "contenedor" que hay en el div. En cuanto a la columna derecha, sale en su sitio de color verde.
Vemos que de esta forma las columnas laterales quedan superpuestas sobre el contenedor y tapan el texto en él. ¿Cómo ponemos entoneces el texto en la columna central?.
La solución es añadir dentro del div contenedor otro div, esta vez sí, de nombre columna central. Le damos márgenes laterales suficientes para librar las columnas laterales, por ejemplo, 120px
<html>
<head>
<style>
* {margin:0px; padding:0px;} /*para evitar
problemas con navegadores */
#contenedor {width:100%; float:left;}
#columna_central {margin-left:120px; margin-right:120px;}
#columna_izquierda {width:100px; float:left; margin-left:-100%;}
#columna_derecha {width:100px; float:left; margin-left:-100px; }
</style>
...
<div id="contenedor">
<div id="columna_central>columna
central</div>
</div>
<div id="columna_izquierda">columna izquierda</div>
<div id="columna_derecha">columna derecha</div>
El resultado, ahora sí, es el deseado.
Por cierto, CSS sigue molestándome un poco. Si en este mismo ejemplo ponemos bordes al contenedor (border:1px solid black;), la columna derecha se descoloca totalmente en firefox, pero no en internet explorer.