Búsqueda personalizada
 
 
 
 
Disposición de 2 columnas
 

Empezaremos a ver como componer una pgina sin utilizar las tablas (un medio muy utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos).
Una solucin para crear una pgina con dos columnas es utilizar el posicionamiento absoluto:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="columna1">
Aca va el contenido de la columna 1.
</div>
</body>
</html> 

La hoja de estilo para esta pgina es:

* {
  margin:0px;
  padding:0px;
}
#columna1 {
  position:absolute;
  top:0px;
  left:0px;
  width:200px;
  margin-top:10px;
  background-color:#ffff55;
}
#columna2 { 
  margin-left:220px;
  margin-right:20px;
  margin-top:10px;  
  background-color:#ffffbb;
}

La primera regla de disponer el selector universal, es decir afecta a todas las marcas HTML, es sacar el margen y padding (generalmente dispondremos esta regla):

* {
  margin:0px;
  padding:0px;
}

Ahora la regla definida para la primer columna es:

#columna1 {
  position:absolute;
  top:0px;
  left:0px;
  width:200px;
  margin-top:10px;
  background-color:#ffff55;
}

Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar la posicin del div en la pgina por medio de las propiedades top y left, en esta caso lo posicionamos en la columna 0 y fila 0 y adems inicializamos la propiedad width, con lo cual le estamos indicando que esta columna tendr siempre 200 pxeles de ancho.
Adems inicializamos la propiedad margin-top con 10 pxeles, recordemos que todos los elementos tienen margin y padding cero.
Ahora veamos cmo inicializamos la segunda columna:

#columna2 { 
  margin-left:220px;
  margin-right:20px;
  margin-top:10px;  
  background-color:#ffffbb;
}

Esta regla no inicializa la propiedad position, por lo que el div ocupa la posicin que le corresponde por defecto, es decir, empieza en la coordenada 0,0 de la pgina. El truco est en inicializar la propiedad margin-left con un valor mayor a 200, que es el ancho de la columna1.

El resto de propiedades que inicializamos son el margin-top, para que sea igual que la primera columna y el margin-right, para que no quede el texto pegado a la derecha.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion