Aplicando la Propiedad WIDTH a Las Capas

Esto define la anchura que queremos que tenga el DIV o la capa. Se puede expresar en pixeles como antes o en porcentajes (%). Si queremos que la anchura del DIV sea la mitad del tamaño de la ventana que tenga abierta el visitante hemos de escribir 50%, o si queremos que tenga un ancho concreto ponemos la cantidad de pixeles: bartolo {width:300px} o bartolo {width:50%}

Pues bien, para probar esto vamos a darle un ancho de 800 pixeles a la capa global que contiene a bartolo y catalina. También vamos a dar un ancho de 80 pixeles a bartolo y no definiremos nada por el momento para catalina. La hoja de estilos quedaría así:

body {background-color:yellow}

#global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px; width:800px}

#bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px}

#catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px}

El resultado es este otro. Lo de ponerle un ancho de 800 pixeles a global es porque normalmente los monitores de nuestros visitantes serán como mínimo de esa resolución, así que escogemos ese tamaño para la web. Como no le hemos dado anchura a catalina, esta capa tomará el tamaño que necesite dentro de la capa global.

No se si te has dado cuenta, pero estamos consiguiendo cambiar el aspecto de la web sin haber tocado todavia la página index.html. Esta es la mágia del CSS y de ahí viene su ventaja, todos los colores, tamaños, etc van en la hoja de estilo y la index.html queda super sencilla, que es lo que le gusta a los buscadores, sencillez para poder leerla.