Índice

Diseño completo HTML:Ejemplo de diseño completo

El principio consiste en utilizar el posicionamiento absoluto para retirar uno u otro bloque del flujo. Más que un largo discurso, este es un ejemplo de código que nos permite crear una página con tres columnas:

<STYLE type="text/css"> 
.centro { 
  margin: 5em 40%; 
} 
.izquierda { 
  position: absolute; 
  top: 5em; 
  left: 1%; 
  width: 25%; 
} 
.derecha { 
  position: absolute; 
  top: 5em; 
  right: 1%; 
  width: 25%; 
} 
    </style> 
    </HEAD> 
      <BODY> 
    <div class="centro"> 
    <p>La columna del centro.</p> 
    </div> 
    <div class="izquierda"> 
    <p>La columna de la izquierda.</p> 
    </div> 
    <div class="derecha"> 
    <p>La columna de la derecha.</p> 
    </div> 
    </div> 
</body>
images/03-16.png