¿DIVS? Nada misterioso, sólo es un rectángulo

¿Cómo funcionan los DIVs? ¿Qué son?

Pués, nada más simple; los DIVs son rectángulos que, por defecto, no tienen ninguna propiedad; es lo que suele llamarse una etiqueta contenedora es decir, un lugar donde podemos agregar cosas. En realidad, cuando digo que no tiene propiedades, me refiero a propiedades extras ya que estas etiquetas tienen algunas características especiales, se "separan" de lo que está arriba y de lo que está debajo de ellas (por eso las llamamos etiquetas de bloque) y tienen un ancho que es igual al ancho total y una altura que depende de su contenido.

Este dato es importante ¿qué es el ancho total? El ancho básico es el de la pantalla del monitor, el BODY de nuestro sitio pero, como podemos poner una etiqueta dentro de otra, el ancho de cada rectángulo depende del ancho del rectángulo que lo contiene.

Si escribimos esto:

<div>
  <div>
    <div>
      <div>
        <div> ....... el contenido ....... </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

No veremos nada distinto a si escribimos esto:

<div> ....... el contenido ....... </div>

Ya que los rectángulos (los DIVs) no tienen propiedades y los tamaños no están definidos así que podemos tener cientos y cientos entrelazados sin que eso cambie absolutamente nada.

Ahora, vamos a darles propiedades. Lo podemos hacer de manera directa, poniendo en cada uno ellos el atributo style:

<div style="....... las propiedades .......">

agregándoles una clase con el atributo class (cosa que es útil cuando tenemos varios elementos con las mismas características y queremos repetirlos):

<div class="miClase">

o dándoles un nombre único con el atributo id si se trata de bloques exclusivos:

<div id="miElemento">

Por ejemplo:

<div style="width:600px;">
  <div style="width:550px;">
    <div style="width:500px;">
      <div style="width:450px;">
        <div style="width:400px;"> ....... el contenido ....... </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

En este ejemplo, no veremos demasiada diferencia salvo que el texto ocupa más líneas porque se encuentra en un DIV más angosto. Pongamosle un color de fondo diferente a cada uno de ellos para verlos mejor:

<div style="background-color:#888;width:600px;">
  <div style="background-color:#666;width:550px;">
    <div style="background-color:#444;width:500px;">
      <div style="background-color:#222;width:450px;">
        <div style="background-color:#000;width:400px;"> ....... el contenido ....... </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Y padding para separarlos entre si (lo que aumentará sus anchos); en todos ellos, agregaremos padding:10px;:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Y centraremos los rectángulos agregando margin:0 auto; en todos ellos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Como se ve, el DIV interior está centrado igual que los otros pero su contenido no, el contenido se centra con text-align:center; sin importar si ese contenido es un texto o una imagen:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Salvo casos especiales, las propiedades del contenido, se heredan es decir si el DIV externo dice que la fuente de texto es de 20 pixeles (font-size:20px;) el DIV interior mostrará una fuente de 20 pixeles a menos que alguno de los DIVs intermedios diga lo contrario. En resumen, las propiedades del DIV interior (el que en este caso contiene un texto) dependerán de las propiedades del primer DIV que las defina, mirando siempre desde adentro hacia afuera.

Una plantilla funciona de esa manera, hay muchos DIVs con nombres únicos o clases, metidos unos dentro de los otros y entender este funcionameinto es esencial cuando nos encontramos con un problema.