Como Posicionar CSS y HTML

1. Posicionamiento
CSS
Eugenia Yadith Gomez

2. El posicionamiento explicado en 9 pasos
1.- POSITION: STATIC
El posicionamiento por defecto para todos los elementos es position: static, lo que
significa que el elemento no estará posicionado y aparecerá donde normalmente debería
hacerlo. Normalmente no deberá especificarse a no ser que deba modificarse una posición
previamente definida.
#div-1 {
position:static;
}
2.- POSITION: RELATIVE
En caso de especificarse position: relative, podrán utilizarse los valores top o bottom,
right o left para posicionar el elemento en la posición relativa donde inicialmente
debería aparecer. En el siguiente ejemplo el div se posicionará 20 pixeles hacia abajo y 40px
a la derecha de su posición original.
#div-1 {
position:relative;
top:20px;
left:-40px;
}
El espacio que deje libre el div no quedará ocupado por ningún otro elemento.
3.- POSITION: ABSOLUTE
Cuando se especifica position:absolute, el elemento será desplazado colocado en
función del primer elemento padre posicionado en que se encuentre (normalmente
será el body).
La diferencia del posicionamiento relativo, los demás elementos ocuparán su posición.
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Existen bug en IExplore con este tipo de posicionamiento. En el ejemplo anterior, si
se le especificara un ancho del 50% (width:50%), el ancho se aplicaría al elemento
padre en lugar del elemento en si.

3. 4.- POSITION: RELATIVE + POSITION: ABSOLUTE
En caso de definir position: relative en el padre, todos los elementos incluidos en él
se posicionarán relativamente tomándolo como referencia (es decir, actuará como
origen de coordenadas para sus divs hijos). Como se comenta, si posteriormente a uno de sus
hijos se le indica la propiedad position: absolute, se posicionará en la esquina superior
izquierda de su elemento contenedor.
5.- LAYOUT DE 2 COLUMNAS
Podrá definirse un layout de 2 columnas combinando el posicionamiento absoluto y
relativo:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
<!-- CÓDIGO HTML -->
<div id="div-1">
<div id="div-1a>Columna derecha</div>
<div id="div-1b>Columna izquierda</div>
</div>
Una ventaja de usar el posicionamiento absoluto es que pueden ir definiéndose los elementos
en cualquier orden. Primero podría definirse la columna izquierda y luego la derecha o al revés.
Los demás elementos, sin embargo, podrán verse afectados por el posicionamiento
absoluto definido. ¿Cuál será la solución?
6.- 2 COLUMNAS CON ALTURA ABSOLUTA
Una posible solución es fijar una altura absoluta. Sin embargo, no será una solución
viable para la mayoría de diseños, pues normalmente no se conoce ni el tamaño de la
fuente ni la cantidad de texto que va a contener cada una de ellas y podría cortarse su
contenido.
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;

4. top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
7.- FLOAT
Por lo tanto, el posicionamiento absoluto para definir alturas variables no es óptimo.
La solución consiste en posiconar un elemento de forma flotante con tal de ubicarlo lo
más a la derecha o lo más a la izquierda posible para, posteriormente, incluir texto en él.
#div-1a {
float:left;
width:200px;
}
8.- FLOAT DE COLUMNAS
Si se hace flotar una columna a la izquierda, también flotará por defecto la segunda a la
izquierda superponiéndose sobre cualquier otro elemento.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9.- FLOAT DE COLUMNAS + CLEAR
Por lo tanto, después de hacer flotar las columnas deberá "limpiarse" el contenido que
ocupan para que los demás elementos se posicionen debajo de ellos.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;

5. width:190px;
}
#div-1c {
clear:both;
}