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.

Mas Videos