Más Retoques
Solo nos falta un detalle importante. Con lo que ya sabes deberías adivinar qué tenemos que hacer para que aparezca una separación entre la capa bartolo y la capa catalina. Como verás en lo conseguido hasta el momento, hay una separación de 2 pixeles entre el marco de global y bartolo y catalina, pero estos dos últimos aparecen pegados. Si quieres separarlos 2 pixeles para que quede mejor... ¿Qué tenemos que hacer?
Tienes varias opciones (a ver si has adivinado alguna...). La primera es entrar en la hoja de estilos y ponerle a bartolo que deje un margin de 2 px a su derecha, es decir, ponerle margin:0px 2px 0px 0px. La otra opción es ponerle a catalina un margin de 2 pixeles a la derecha, es decir margin:0px 0px 0px 2px. Hay otra opción, que es ponerle solo un pixel a bartolo y el otro pixel a catalina, claro. Escogemos la primera opción.
Eso sí, que no se nos olvide! Como le hemos dado 2 pixeles más de ancho a bartolo, hemos de quitárselos a catalina en su ancho. Pasaremos de 712px a 710px, oki?
Si alguna vez preferís dar a bartolo 50 pixeles más, se los sumais a él y se lo restais a catalina, de forma que la suma (incluyendo bordes, márgenes, etc) sea el ancho de global. No es tan complicado, no? 
Otro apunte
Date cuenta que todo todo todo aparecerá centrado, pues hemos definido text-align:center en la hoja de estilo para body, que contiene todo. Si quieres que los elementos de bartolo aparezcan de otro modo, como por ejemplo a la izquierda, hemos de añadirle la línea señalada en negrita abajo a la hoja de estilo. Si en catalina queremos poner textos, quizás prefieras ponerle a ella un text-align:justify, que justifica el texto quedando mucho mejor.
Separando los textos
Por otro lado, si deseas que los párrafos de texto no queden tan pegados a la línea de borde, una opción es usar el padding, pero como todos los navegadores no leen esta propiedad igual, mejor lo haremos de otro modo para evitar que la web se nos desordene según el navegador que se use.
Esa otra opción es darle un padding a los párrafos en la hoja de estilo. Por ejemplo de 10 pixeles a cada uno de los lados y de 5 pixeles arriba y abajo.
La hoja de estilos quedará finalmente así:
#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 2px 0px 0px; width:80px; float:left}
#catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px; float:right; width:710px; text-align:justify}
p {padding:5px 10px 5px 10px}
y nuestro ejemplo se verá de este modo
Más sobre Capas:
