EstadoBeta

Columnas CSS: floats.

Visita este artículo en http://www.estadobeta.com/2006/06/11/columnas-css-floats/

Por Ismael en CSS, artículos, tips

Diagramando columnas HTML usando el atributo “float” de CSS.

Hay varias alternativas para diagramar columnas con XHTML + CSS. El siguiente método utiliza el atributo float.
En nuestro HTML (XHTML 1.0 transicional) definiremos tres bloques o columnas:

<div id="container"> <div id="columna-1"> Columna 1 </div> <div id="contenido"> Contenido </div> <div id="columna-2"> Columna 2 </div> </div>

En un archivo CSS vinculado al documento XHTML, definimos selectores para los DIV’s y estilos generales para el body y el container.

* { padding:0; margin:0; } body { font:10px/120% verdana,arial,sans-serif; text-align:center; /* para centrar el container en IE */ } #container { text-align:left; width:80%; /* puede ser en px, pt, em, etc */ margin: 0 auto; /* Para centrar el container en el body */ min-width:700px; /* esto no funciona en IE */ } #columna-1 { background:silver; float:left; width:20%; } #columna-2 { background:#DCFF2E; float:left; width:20%; } #contenido { background:#FFC985; float:left; width:60%; }

Esto es harto código de una sola vez, pero es sencillo: primero le damos un ancho a #container y lo centramos en el body. A continuación agregamos el atributo float:left; y un ancho a cada columna. Al usar porcentajes estamos fijando dimensiones relativas al ancho del #container. Esto nos da un diseño más flexible y fácil de modificar (basta con cambiar el width del #container y las columnas cambiarán de acuerdo a eso).

Pero ¿qué hace float, exáctamente? La propieadad float no hace una sino varias cosas:
primero, fuerza la propiedad display del elemento al valor “block”. Esto nos permite manipular el width y height libremente (sólo los elementos de bloque - “block”- pueden modificar sus dimensiones explícitamente. Los demás -”inline”- se adaptan a la extensión de su contenido).
Segundo, el atributo float permite que los elementos se apilen horizontalmente Por defecto, los elementos de bloque se apilan verticalmente, uno arriba del otro. Para lograr el “layout” en columnas necesitamos que se apilen horizontalmente y ahí es donde brillan los floats.

Pero a nuestro ejemplo le faltan cosas. Sería ideal que las tres columnas tengan la misma extensión vertical (height). Una solución sencilla puede ser incluír el siguiente código CSS:

#columna-1,#columna-2,#contenido { min-height:500px; /* alto mínimo para las 3 columnas. No funciona en IE */ } * html #columna-1,* html #columna-2,* html #contenido { height:500px; /* Hack del asterisco. Sólo para IE */ }

Otra solución es poner una imagen con los colores para las 3 columnas de fondo del body o el #container, dejando que se repita verticalmente. Eso dará la ilusión de que las columnas continúan hacia abajo pero puede ser un problema si queremos modificar las dimensiones de estas (habrá que rehacer la imagen o usar técnicas más avanzadas).

¿y los márgenes?
Pero queremos darle un margen interno (padding) a los contenidos de las columnas. Como vimos en el post anterior, no es viable agregar padding o margin a las columnas porque esto modificará su width (width se suma a margin, border y padding). Lo mejor que podemos hacer es incluír elementos especiales para manejar los márgenes:
<div id="container"> <div id="columna-1"> <div class="marginador"> Columna 1 </div> </div> <div id="contenido"> <div class="marginador"> Contenido </div> </div> <div id="columna-2"> <div class="marginador"> Columna 2 </div> </div> </div>

Y luego en el CSS:

.marginador { margin:2em; }

La unidad em equivale al alto de la letra más alta al tamaño de fuente utilizado. Esta unidad es útil para diseñar “layouts” que se ajustan al tamaño de fuente.

Bien usados, los floats pueden ser muy poderosos para este tipo de estructuras, pero tienen inconvenientes: los elementos contiguos a un float tienden a “rodear” al float, lo que en algunos casos se puede hacer inmanejable. En IE, si el contenido excede el ancho o alto de un elemento, éste incrementará sus dimensiones para acomodar al contenido. Esto se puede traducir en un float más ancho que empuja a las demás columnas y rompe el diseño.
Por último, los floats dependen del orden de los elementos el el código HTML. En la mayoría de los casos es mejor situar el contenido principal del documento lo más arriba posible en el código (los buscadores tienden a dar mayor importancia al contenido superior de las páginas). Utilizando floats, esto no es posible en el ejemplo de las tres columnas en este artículo.

En el próximo artículo de esta serie veremos alternativas a la diagramación de columnas con Floats.

Aquí pueden bajar el archivo de este ejemplo (CSS incluído en el HTML).

css, float, layout, columnas

Este artículo fue publicado en 11/6/2006 a las 10:44 pm y está archivado bajo CSS, artículos, tips. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores. Puedes dejar un comentario, o hacer un trackback desde tu propio sitio.

29 comentarios para “Columnas CSS: floats.”

Mañungo Dice:
6/11/2006 at 11:16 pm
Sobre el min.height: En vez de
#columna-1,#columna-2,#contenido { min-height:500px; /* alto mínimo para las 3 columnas. No funciona en IE */ }
Es mucho mejor usar el siguiente truco:
#columna-1,#columna-2,#contenido { min-height:500px; _height: expression( if( this.height Se puede hacer lo mismo para la propiedad min-width que tampoco es soportada por ie6
Ismael Dice:
6/12/2006 at 2:13 am
No bastaría con usar _height? Los atributos con guión bajo también son interpretados sólo por IE, pero personalmente no los uso porque dan errores de validación en Firefox (son un error de sintaxis).
El hack del asterisco lo encuentro más limpio y fácil de mantener en la hoja de estilos.
Por otro lado, laes expresiones javascript en CSS son propietarias de Microsoft y se salen del estándar.
sergiomas Dice:
6/12/2006 at 4:33 am
El guión bajo está permitido en la especificación 2.1 de CSS, y si no valida es por que los validadores no tienen soporte para dicha especificación.
noth Dice:
6/12/2006 at 5:28 am
interesante y muy facil de seguir, como de constumbre

gracias
Sebastian Dice:
6/12/2006 at 2:07 pm
Ehhh solo le eche un vistazo luego lo leo con mas detención. (almuerzo)
Como siempre gracias EstadoBeta
Saludos
Mañungo Dice:
6/12/2006 at 3:37 pm
Hola Ismael!
Primero, la expresion salió cortada, hay un “menor que” que desapareció, te agradeceria si lo editas
_height: expression( if( this.height < 500 ) this.height = 500; );
Segundo, es verdad que las “expressiones” son propietarias de microsoft, pero justamente eso es lo que queremos, que funcione sólo para IE.
Tercero, con la “expression” el comportamiento de IE es exactamente el que queremos: que el tamaño mínimo sea 500. Con tu hack el tamaño siempre será 500.
Cuarto y último, no te parece raro que Firefox considere sintácticamente válido el hack del *, pero no lo respete ? Para mi, ambos “hacks” son igualmente malos.
Ismael Dice:
6/12/2006 at 6:03 pm
Mañungo: buen punto. Si fijas el height:500px sólo para IE, ese navegador respetará esa medida si el contenido es menor que 500px. Si el contenido es más extenso, el DIV crecerá para ajustarse al contenido. Los navegadores con mejor implementación del estandar dejarán que el contenido sobrepase el contenedor, y por eso para esos navegadores no definimos height pero si min-height. Dime si me equivoco, pero me parece que el efecto es el mismo.
Sebastian Dice:
6/12/2006 at 6:05 pm
Claro, rápido y sencillo. Muy buenas explicaciones se despejaron varias dudas.
Gracias.
Mañungo Dice:
6/13/2006 at 12:20 am
Ismael, considera el caso que hay un overflow:auto en el estilo de una de las columnas; si defines el height aparecerán scrollbars en IE6.
Ismael Dice:
6/13/2006 at 12:41 am
Si…Sin embargo el único caso en el que me imagino usando overflow:auto es justamente para tener scrollbars. De otro modo usaría overflow:visible o hidden según el caso.
Sebastian Dice:
6/13/2006 at 3:34 pm
A mi me esta funcionando todo impeque, incluso en IE 4 de Mac no se desarma en lo absoluto. En relacion a lo que estan discutiendo: Es realmente necesario utilizar el min height, segun entiendo si el height fuese auto, este se acomoda al contenido del div.
Saludos
Ismael Dice:
6/13/2006 at 3:43 pm
Sebastian: “auto” es el valor por defecto de height, así que no es necesario ponerlo. El min-height te sirve si quieres que haya un alto mínimo.
Miguel Ibostroza G. Dice:
6/13/2006 at 11:32 pm
Hola Ismael y hola a todos:
UFF q avanzado es el nivel con el q estan comversando, pero les contare mi problema q me tiene loko, yo tengo un blog q es parte de mi proyecto de titulo y puse una botonera con codigo javascript en el #sidebar-wraper (supongo), logre q en IE se vea bien, pero una vez al apretar un boton de la botonera y al irse al link q es un html correspondiente al blog se desaparece todo lo del #sidebar-wraper, pero lo más curioso aun es q en mi blog personal tambien puse la botonera javascript pero se ve perfecta nada desaparece en IE exepto los links. (ocupo blogger por si acaso a lo mejor ese es el problema)

Aca les dejo las dos direcciones de los blogs a ver si alguien me puediese alludar de ante mano muchas muchas gracias y disculpen mi ignorancia.

Este es el blog con problemas:
http://guiartebba.blogspot.com/

Este es el blog sin problemas:
http://expocultura.blogspot.com/
Sebastian Dice:
6/19/2006 at 1:03 pm
Miguel, vi las dos direcciones que dejaste y no tuve problemas con la página, se ve todo bien afortunadamente no ocupo IE a si es que no se como se verá en ese navegador. Pero al menos yo no tuve problemas para navegar en el blog.

Ismael: tanto tiempo, ahhh estuve revisando mis archivos y mis códigos, ahora no voy a preguntar nada solo hacer una mención. Yo quería tener un contenido mas grande y luego dos columnas pequeñas una para menu y otra para contenidos (miniposts). En un principio lo hice guiandome por el ejemplo del artículo y solo comabie los floats para que las columnas se acomoden, resultado: en IE se desarmó. Ahora pienso que puedo seguir el mismo orden y tan solo cambiar los Widths. Cierto? ja.
Saludos.
Ismael Dice:
6/19/2006 at 2:52 pm
Sebastian: prueba disminuyendo los widths hasta que se vea bien en IE, tratando de entender porqué se está desarmando. Generalmente se estan sumando anchos por aquí y por allá, y además hay un bug conocido en IE6 que suma un par de pixeles cuando tienes 3 floats contiguos. Otro problema m¡as práctico de los floats: generalmente quieres que tus sidebars tengan un ancho fijo (por ej. 200px) y que el area de contenido sea flexible. En el próximo post de la serie mostraré cómo lograr eso usando position relativo y absoluto.
Sebastian Dice:
6/20/2006 at 8:51 pm
Claro, eso ya lo he probado disminuir o agrandar hasta que resulte, ensayo y error!!!, y si, al parecer es por un par de pixeles que hacen que se desarme, lo importante es que cada vez voy entendiendo más, a parte que diseñar páginas de esta manera, por lo menos para mi es mucho mas fácil y rápido que hacerlo en dreamweaver. Lo bueno de la serie de posts que estás haciendo (que espero que continue por un rato largo) es que ya voy/vamos a tener las estructuras de las páginas que es lo que me más me preocupa.
Saludos.
EstadoBeta » Archivo » Columnas CSS: position Dice:
6/22/2006 at 6:30 pm
[…] recursos « Columnas CSS: floats. […]
EstadoBeta » Archivo » Despejando Floats para IE7 Dice:
12/6/2006 at 6:02 pm
[…] Mediante el método tradicional de eliminar pequeños bloques de código a la vez, llegué a descubrir un sospechoso inesperado (la información está en la web, pero le estoy poniendo dramatismo). Se acuerdan de la clase clearfix? La he recomendado varias veces en este sitio y su objetivo es eliminar un molesto problema cuando tienes varios floats dentro de un DIV contenedor (¿más detalles? Jorge lo explica letra por letra). […]
Stella Dice:
1/9/2007 at 1:15 pm
Tengo problemas con el largo de columna de la web que estoy haciendo. si quiero que el largo MINIMO sea 500px; en donde coloco el codigo que mañungo dice:

_height: expression( if( this.height
Stella Dice:
1/9/2007 at 1:16 pm
salio cortado, el comentario anterior, lo pongo en la misma hoja de estilo , en en layer que corresponde a la columnmna? Donde?? Ayuda por favor

Ismael Dice:
1/9/2007 at 1:30 pm

Stella, si tienes un div de esta manera


<div id="columna">
...
</div>

Entonces, en tu hoja de estilos puedes hacer lo siguiente:

#columna {
   min-width:500px;
   _width: expression( if( this.width < 500 ) this.width = 500; );
}

Columnas 1 « Taller de produccion web UNIACC Dice:
4/10/2007 at 11:00 am
[…] este artÃculo explico cÃ³mo usar DIVs junto con al atributo float para diagramar […]
Columnas 1 « Desarrollos para Internet Dice:
4/12/2007 at 2:10 pm
[…] este artÃculo explico cÃ³mo usar DIVs junto con al atributo float para diagramar […]
Columnas 2 « Taller de produccion web UNIACC Dice:
4/17/2007 at 3:01 pm
[…] Columnas CSS: Floats (EstadoBeta). […]
Columnas 2 « Desarrollos para Internet Dice:
4/19/2007 at 2:17 pm
[…] Columnas CSS: Floats (EstadoBeta). […]
Alejandro Dice:
6/27/2007 at 5:54 pm
Ami este NO me funciona:

#columna {
min-width:500px;
_width: expression( if( this.width 1050? “1050px”: “auto” );

}
Alejandro Dice:
6/27/2007 at 5:55 pm
este si
#columna {
min-width: 750px;
max-width: 1050px;
_width: expression(((document.body.clientWidth)) 1050? “1050px”: “auto” );
Herrkin Dice:
11/27/2007 at 5:27 pm
saludos, estoy en un gran dilema, me estoy partiendo la cabeza para reproducir lo que tengo aqui www.flowpartys.com
osea, las columnas decorativas de los lados, quiero hacerlo en divs de manera que la pagina pueda ser dimensionada y se vea bien, osea, usando float que las columnas se queden en los lados y ocupen todo el documento verticalmente inclusive el foot..

me ayudan?
fraN Dice:
6/25/2008 at 3:02 pm
Muy útil el ejemplo! Me sacó de un gran apuro. Muchas gracias

desarrollo web con estándares

Columnas CSS: floats.

29 comentarios para “Columnas CSS: floats.”

Deja un comentario

Categorías

Subscripción (?)