Foros del Web - Ver Mensaje Individual

romel_inc · #82 (**permalink**) 27/03/2010, 14:01

¿Como crear columnas “Fácilmente” con muy poco Código?

Además que funcione fino en los diferentes navegadores, Además sin usar tablas, Además Sin usar la etiqueta “li”, Además etc.

Ejemplo 1

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<style type="text/css">

body{ width:1000px; background:#CCC; margin:0 auto;}

a{ float:left; width:24%; background:#999; margin: 1px 2px; }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->


<body>
<div class="clearfix" > <!-- float container -->

  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
  <a href="#">Some content</a>
 

<div style="clear:both;"></div>

</div>


</body>
</html>

Ejemplo 2

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<style type="text/css">

body{ width:1000px; background:#CCC; margin:0 auto;}

a.estilo{ float:left; width:24%; background:#999; margin: 1px 2px; }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->


<body>
<div class="clearfix" > <!-- float container -->

  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  <a class="estilo" href="#">Some content</a>
  

<div style="clear:both;"></div>

</div>


</body>
</html>

Fuente: [En ingles]
http://www.positioniseverything.net/easyclearing.html

Por si acaso subí una copia de la pagina web en caso de que no este online.
a varios servidores. y los ejemplos están incluidos.

http://www.mediafire.com/file/dnznzdzymnr/ejemplos.zip

http://www.megaupload.com/?d=8EWV1LI0

PD: La explicación de como funciona esta en ingles, Seria interesante verla en español y de fácil compresión. Y ver los ejemplos Mejorados ya que no son perfectos pero tienen la idea, Saludos.