¿Dos cajas iguales con distinta anchura?

[Sr.9ªNube]

Hola.
Estoy haciendo pruebas con los Modelos de Cajas en CSS (de hecho llevo unos días aprendiendo CSS) y he aprendido que tanto los valores de márgenes externos o "margin" y el relleno o "padding" dependen del contenido y los elementos que le rodeen.

Sin embargo creía que si dos elementos (dos contenedores) tenían la misma anchura (width) en píxeles se verían iguales:

-->>Como no puedo todavía poner enlaces, podeís ver un pantallazo del ejemplo aquí: poner el http: y las barras invertidas--img338.imageshack.us/my.php?image=cajascsscw6.jpg

Sigo con el mensaje:

Pero eso no ha sido así, pués el contenedor areatexto tiene 720 px y al contenedor encabezado le tuve que poner 760 px. ¿Como puede ser esto?.

Este es el código de mis pruebas:

body {
background-color: black;

}
h1 {
font-family: "times new roman";
text-align: center;
color: Red;
}
h3 {
font-family: impact;
color: Green;
}
p {
font-family: "balthazar regular";

}
#encabezado {
background-color:white;
width:760px;
padding:10px 10px 10px 10px;
border:5px solid red;
margin:0px 0px 80px 270px;
}
#menu {
float: left;
background-color:white;
width:130;
height:440;
padding:10px 50px 10px 20px;
border:5px solid red;
margin-left:10px;
}
#areatexto {
background-color:white;
width:720px;
padding:10px 30px 10px 30px;
border:5px solid red;
margin-left:270px;
}

Otra cosa.
Acabo de ver, por encima, las FAQs de CSS y tienen muy buena pinta. Pero me llamo la atención que no teniais nada sobre Cajas y si sobre Capas de las que todavía no conozco nada (excepto alguna imagen por ahí) y me preguntaba si vienen ha ser lo mismo, ya que en mis pruebas con Cajas comprobé que también se podian colocar unas encima de otras.
Muchas gracias y saludos.

[mr_estufo]

A ver. El tamaño final de una caja es la suma del tamaño ke le demos en width o height mas el padding, mas margin.
Ejemplo:
Tu encabezado hace width:760px mas padding:10px 10px 10px 10px, (que quiere decir 10px a izquierda+10px a derecha=20px) mas border:5px (que quiere decir 5px a la izquierda + 5px a la derecha=10px)
En total encabezado=760+20+10=790px
Area texto= a width:720px mas padding:10px 30px 10px 30px(que quiere decir 30px a la izquierda+30px a la derecha=60px) mas border 5px (que quiere decir 5 px a la izquierda+5px a la derecha=10px)
En total areatexto=720+60+10=790px
Supongo que tu duda se refiere a esto. Un Briconsejo: A mi me han enseñado que lo mejor en estos casos en al lado del width te pongas un comentario del tipo por ejemplo:

width:760px; /*790-20-10*/
osea el tamaño final que tiene la caja y la resta del padding y el border.

Espero que te haya sido de ayuda.
Suerte