Licencia Creative Commons   
Registrate Login Articulo aleatorio

Suscribete

CSS: Como usar el Float y el Clear y no perder la cabeza +

Uno de los dolores de cabeza mas fuertes cuando estamos maquetando con CSS en un sitio es el uso del atributo float en nuestras capas ya que si estan contenidas dentro de otra capa esta usualmente no converva la altura de la capa que tiene el atributo float.

Como evitar esto? en donde lo podemos utilizar? pues bueno las repuesta son las siguientes:

Como evitar esto?

Utilizando un capa extra con el atributo clear:both;

  1. .clearfix{
  2. clear:both;
  3. }

En donde lo podemos utilizar?

En un template con mas de una columna.

En un calendario ya ven que son cuadritos consecutivos dentro de un contenedor.

o incluso en un ordenamiento de bloques como el que utiliza los startups como netvibes.

  1. .contenedor{
  2. border:1px solid #cccccc;
  3. padding:2px;
  4. margin:2px;
  5. }
  6.  
  7. .capa{
  8. border:1px dashed #cccccc;
  9. background:#f2f2f2;
  10. width:110px;
  11. height:110px;
  12. float:left;
  13. }
  14.  
  15. .clear{
  16. clear:both;
  17. }
  1. <div class=“contenedor”>
  2.                         <div class=“capa”>01</div>
  3.                         <div class=“capa”>02</div>
  4.                         <div class=“capa”>03</div>
  5.                         <div class=“capa”>04</div>
  6.                         <div class=“capa”>05</div>
  7.                         <div class=“capa”>06</div>                             
  8.                         <div style=“clear:both;”></div>
  9.                 </div>

ver ejemplo

Espero estos tips les sean utiles y si hay dudas pues solo pregunte ;)

Publica tu Comentario sobre este Articulo.

Suscribete a nuestro RSS Feed

Mas Articulos, Relacionados:



4 Comentarios en “CSS: Como usar el Float y el Clear y no perder la cabeza”

  1.   Rogelio | Octubre 1, 2007@ 8:25 am

    Interesante blog de diseño, sobre lo del float, me gustaria saber para que browsers funciona, al menos en ie6,7,firefox y opera.

  2.   frogx3 | Octubre 1, 2007@ 12:05 pm

    Saludos rogelio esto lo he probado en FF, IE6 , Opera y Safari, en IE ay un pequeño bug que estare checando por la noche para resolverlo pero esa misma tecnica utilice en el template de este blog para las dos columnas principales y hasta donde se se ve bien en todos los navegadores.

    saludos

  3.   Scyfox | Julio 25, 2008@ 4:04 pm

    Saludos.

    Sorry por levantar un post tan viejo, pero encontré una solución mejor. Aunque como siempre tiene su costo.

    Si al DIV contenedor le pones overflow:auto, puedes manejar todos los otros divs como float:left o right según sea el caso.

    Asi pude ordenar adecuadamente el div contenido, sidebar y footer sin que se sobrepusieran arriba de footer, y además como todo es CSS, evitas poner tags o divs html extra.

    te dejo el link para que revises.

    URL:http://www.sitepoint.com/examples/clearing_floats/example2.php

    Silla!

Pingbacks

Envia tu comentario

Al suscribirte recibirás un email cuando alguien conteste tu comentario.

« 8 errores en el diseño web Google Adsense esta fallando »
  • Liquid Web, Heroic Support
  • Foros de Diseño y Desarrollo Web
  • Contrata tu banner 125x125
  • Contrata tu banner 125x125
suscribete via RSS suscribete via Correo Electronico

12,000 iconos gratis

Este paquete de iconos tenia tiempo con ganas de compartir son todos los icono...

36 diseños de tarjetas de presentación muy creativas

Que te parecen estas tarjetas si quieres ver las otras sigue el enlace par...

Fondos de pantalla con calendario de Mayo

Excelentes fondos de pantalla con el calendario de Mayo de 2008, todos son muy...

Google

Web www.frogx3.com

tags


Todo los Tags
frogx.three esta montado en WordPress 2.6, el theme Colorx v2.0 fue creado por Jorge Aldana (frogx3).
Entradas RSS - Comentarios RSS - 51 queries. - 0,825 seconds.