Aprendiendo a diseñar con DIV y CSS Parte 1: Flotar y limpiar

Mientras que en el pasado se diseñaba todo mediante tablas, hoy el soporte para el diseño con DIV permite creaciones extraodinariamente complejas y estructuradas, sin los problemas de las tablas en los espacios vacíos que se solventaban con trucos -como imágenes transparentes-.

Sin embargo los DIV tienen sus propio problemas con los porcentajes, con la flotación que desborda el contenedor y con los cambios de tamaño que sufre un DIV al aplicarle la propiedad CSS padding, aún así son más fáciles de controlar y modificar, algo que con tablas es una tarea bastante difícil.

Flotar o no flotar
En el diseño CSS, todo se trata de elementos flotando en contenedores para formar hileras de DIV.

Todos estos problemas los resolveremos, de momento veremos las claves del diseño con DIV mediante float (position lo veremos luego).

El diseño mediante flotación requiere de tres propiedades CSS y condiciones de funcionamiento.

Puntualizaciones CSS

1. Float o flotar: Los elementos se flotan para que ocupen una posición dentro de un contenedor.
2. Todos los elementos que esten dentro del contenedor deberán contener float.
3. Solamente se puede flotar a la derecha o la izquierda.
4. Clear o limpiar: Se requieren limpiar la flotación para establecer el límite de flotación izquierdo y derecho.
5. Width o ancho: Se requiere que el contenedor y todos los elementos flotados funcionen con un ancho definido. Es cierto que todos los elementos podrían manejarse por porcentajes, pero tienen grandes defectos con los nuevos navegadores y el zoom o los problemas del calculo de tamaño con padding, siempre deberá existir al menos un contenedor con un tamaño en pixeles.

Puntualizaciones  Conceptuales

1. El diseño con div es modular, esto es; una pagina se compone de diferentes div contenedores que contienen o no, elementos flotados o dispuesto de forma vertical.
2. El div que contiene otros div flotados requiere otro div que evite que se contraiga el contenedor.
3. El alto y los porcentajes no funcionaran sin un referente con una medida absoluta, valores como 100% no tienen sentido, pues el alto nunca tienen un tamaño fijo a diferencia del ancho que en último caso será el tamaño del ancho del de la ventana del navegador, se establece un alto en una medida como pixeles digamos el contenedor mide 500px y todo los div dentro podrán usar porcentajes, aunque diseñar un height absoluto tiene muchos inconvenientes.
4. Todos los elementos necesitan del uso de clases o ID.

Vamos hacer un ejercicio bastante simple flotando 3 DIV dentro de un tercero, usaremos únicamente ID con una única instrucción CSS.

Este es nuestra estructura de DIV.

<div>
   <div>Contenido 1</div>
   <div>Contenido 2</div>
   <div>Contenido 3</div>
</div>

Siles agregamos un solo ID al contenedor que llamaremos "contenedor-mains":

<div id="contenedor-mains">
           <div>Contenido 1</div>
           <div>Contenido 2</div>
           <div>Contenido 3</div>
</div>

En CSS usamos el siguiente código (Los ID van precedidos de "#" y los Class de "." sin embargo cuando se agregan a las etiquetas id="" y class="" no se pone ni #, ni "."):

#contenedor-mains
{
background:#000;
width:450px;
}
#contenedor-mains div
{
border:2px solid #FF0100;
background:#fff;
width:120px;
margin:10px;
}

1. Esto significa que el #contenedor-mains tendrá un ancho de 450px, con un fondo de negro.
2. En la segunda instrucción que en relidad es una condición de la primera al #contenedor-mains le agregamos div, que significa que todo div dentro el objeto con un ID #contenedor-mains tendrán un borde de 2 pixeles y un margen entre ellos de 10px y un ancho de 120px.

Así es como se verá:

Contenido 1

Contenido 2

Contenido 3

Por norma natural todo los divs se alinearán a la izquierda y no de forma horizontal
Si queremos que Todos se alinean en horizontal debemos usar la propiedad float:left

Usando el mismo código CSS:

#contenedor-mains
{
background:#000;
width:450px;
}
#contenedor-mains div
{
float:left;
border:2px solid #FF0100;
background:#fff;
width:120px;
margin:10px;
}

El resultado con la flotación incluida:

Contenido 1

Contenido 2

Contenido 3

Limpiar flotación (Técnica)
Se darán cuenta que el div principal ha desaparecido, pese a que tenemos un color asignado, esto se debe a que al flotar los elementos salen del contenedor y este por consiguiente se colapsa, la única forma conocida de solucionar esto es agregar un div vació con la propiedad clear:both, si creamos una regla de clase CSS (las clases van precedidas por un punto "."):

.clear {clear:both;}

Ahora creamos un div con la clase clear asignada o sea:

<div class="clear"></div>

Con esto espero que entienda las formas de aplicar los ID y las Clases, las clases son propiedades que podremos implementar a diversos elementos, con en el caso de este div con clear, pue podemos tener muchos contenedores. Mientras que los ID solamente los asignamos a un solo elemento.

Un elemento con un ID, tambien puede tener una Clase.

El código quedaría así

<div id="contenedor-mains">
           <div>Contenido 1</div>
           <div>Contenido 2</div>
           <div>Contenido 3</div>
<div class="clear"></div></div>

Usando clases sobre div
Sin embargo la regla #contenedor-mains div afectaría a <div class="clear"></div>, porque no discrimina entre un DIV y otro contenido en #contenedor-mains. Así que tendremos que sustituirla por una clase que aplicaremos a los div que queramos.

A esta clase la llamaremos por ejemplo .flotado, que sustituye donde antes era #contenedor-mains div quedando como:

#contenedor-mains
{
background:#000;
width:450px;
}
.flotados
{
border:2px solid #FF0100;
background:#fff;
width:120px;
margin:10px;
float:left;
}
.clear
{
clear:both;
}

En el html asignamos la clase class="flotados" a los div que queremos flotar exceptuando al contenedor y el div de clase clear quedando como:

<div id="contenedor-mains">
           <div class="flotados">Contenido 1</div>
           <div class="flotados">Contenido 2</div>
           <div class="flotados">Contenido 3</div>
<div class="clear"></div>
</div>

El resultado:

Contenido 1
Contenido 1
Contenido 1
Contenido 1
Contenido 1

Contenido 2
Contenido 2
Contenido 2

Contenido 3
Contenido 3
Contenido 3
Contenido 3

Conclusiones
Como pueden apreciar este es el principio básico del diseño mediante etiquetas DIV

Si en vez de la clase ".flotados" ponen tres reglas de ID  #flotado-1, #flotato-2 y #flotado-3 podrán asignar diferentes anchos, es algo que veremos después.

También debemos considerar que muchas veces es más fácil que flotar tres elementos a la izquierda, flotar el de la derecha a la derecha con float:right, si fuesen cuatro es recomendable flotar dos a la izquierda y dos a la derecha, algo que hace más sencillo el trabajo a la larga.

Es necesario aprender las ventajas de margin-left, margin-right, padding-left y padding-right que veremos luego.

Recomendaciones
Para novatos en CSS por favor ver el siguiente tutorial:

• CSS para novatos parte 1: Tipos de implementaciones CSS

Sigue en:

• Aprendiendo a diseñar con DIV y CSS Parte 2: Position absolute y relative