hola!
muy positiva tu actitud, entender lo que uno está haciendo es el único camino para realmente aprender, sino terminás copiando y pegando csas que no sabes ni porqué.
voy a analizar tu código.
1) el elemento DIV, igual que todos los otros elementos de bloque, tienen por defecto un width automático que equivale a "todo el espacio disponible" Por lo tanto no es necesario que le pongas width:100% a los divs [lo explico en el punto 3].
2) entiendo que tienes 2 contenedores porque un width del 100% + 40px de padding evidentemente suma más del 100%. Sin embargo sabiendo lo que te dije en el punto 1, puedes eliminar totalmente el width, y con eso se va la necesidad de tener .contenedor-b [de aquí hasta el final voy a considerar que .contenedor-b ya no existe]
3) Para entender lo de los paddings y borders, tienes que entender lo que es el modelo de cajas que generan los elementos en bloque (DIV, P, H1-H6, etc) . Eso se resume de la siguiente manera:
ancho total = margin izq + border izq + padding izq + width + padding der + border der + margin der
si no especificas ningún width, por defecto el width tiene un valor "auto", y equivale a todo el espacio que esté libre una vez descontados el padding, border y margin.
4) Los floats. El gran dolor de cabeza de los que empiezan, vas a ver que en realidad no es algo tan difícil cuando se entiende que es lo que pasa.
Cuando flotas un elemento, lo que haces es quitarlo del flujo de contenido. Eso significa, entre otras cosas, que la altura del elemento flotado no es considerada para calcular la altura del elemento que lo contiene (elemento padre, en este caso tu div contenedor). Esto implica que, si un elemento tiene dentro solo elementos flotados (como es el caso de tu .contenedor), su altura calculada va a ser 0. Para corregir esto y que el .contenedor "vea" los divs flotados, se pueden usar diferentes técnicas, en un proceso que se conoce como LIMPIAR LOS FLOATS.
- Una de esas técnicas es la que tu enlazas (pero que la aplicaste mal, ya que la clase "clearfix" hay que asigársela al contenedor, no a un div extra), pero que data 2006, y ha llovido mucho desde entonces. Aquí tienes la misma técnica
pero actualizada. Puedes ver
el demo con el código.
La clase .clearfix (o .cf en el ejemplo moderno que te enlacé) se la debes de aplicar al div contenedor, puedes aplicar más de 1 clase a un mismo elemento simplemente separando los nombres con espacios, de esta forma:
- otra técnica, más sencilla (pero que tiene un inconveniente puntual que a veces imposibilita su uso), es simplemente en el css agregarle "overflow:hidden;" al .contenedor
- una tercera técnica, la más antigua pero diría que la más confiable, es agregar un div vacío (enseguida después del último elemento flotado) con el estilo "clear:both"