- acostúmbrate
a validar tu CSS... "auto" no es un valor válido para float (solo se aceptan left, right y none) y además en "margin-left
::80px;" tenes repetidos los dos puntos.
- las imágenes de decoración tienen que ir como fondo (desde el css) no como imágenes incrustadas en el html. Ese es el primer paso para generar un html + semántico, y un html semántico es el primer paso para no tener problemas con los navegadores.
- no entiendo porque #principal y #header estan flotando
- te recomiendo usar la mínima cantidad de divs posibles... en este caso usas 8, y se podría hacer con 3 o 4:
- 1 contenedor general para fijar en ancho y centrar el diseño
- 1 para el header (esto se puede obiar y simplemente poner esa imagen como fondo de un h1)
- 2 para el contenido (uno dentro del otro, y después le pones la imagen del borde de fondo a ambos, uno como fondo alineado a la izq y el otro fondo alineado a la derecha). Usa padding left y right para que el texto del contenido no te tape las imágenes de fondo
PD: de la forma que te digo ni necesitas usar float
