CSS - Meter cajas en otras con un slideshow de por medio

Buenas amigos, a ver si alguien me puede ayudar porque ya me estoy volviendo loco de tanto darle vueltas al tema, y creo que no lo debo estar haciendo mal pero, sin embargo, no salen los resultados que espero.

Estoy rediseñando mi página de inicio y, apriori, no debería tener ninguna complicación salvo porque he añadido un slideshow, con javascript. Son 6 imágenes (de momento), pero junto con el css que lleva, solo queda visible una imagen ya que las otras no están visibles y se van intercambiando correlativamente con un fade. El caso, y por aquí creo que viene el problema, para que el Slideshow funcione, un estilo posiciona la imagen oculta de manera aboluta, la visible se queda de manera relativa, como el resto de cajas del diseño.

Ahora mismo, las cajas son así (sin márgenes ni paddings).


La caja site-navigation no me plantea ningún problema.
La caja site-header contiene dos cajas "site-brading" y "rotating-item-wrapper" que es la caja del slideshow. Bien, el dieño original, con una sola imagen, utilizaba una sola caja donde la imagen era el background y, por tanto, el texto que contenía "site-header" era fácil de posicionar. En cambio, ahora lo que me gustaría hacer es superponer la caja "site-branding" por encima de "rotating-item-wrapper" para que el título de la web se muestra por encima del pase de imágenes. Lo resolvería si le doy posición absoluta, pero por algún motivo deja de centrarse para irse la derecha y, además, dejarlo fijado me complicará mucho hacer luego la parte responsive ya que tendría que trabajar con píxeles.

Por otro lado, el footer (site-footer) no se me queda bajo la caja "site-header", imagino que al quedarse una parte ocula, el footer coje todo ese espacio y se mete bajo el Slideshow, quedando visible solamente en el fade de las transiciones. Igualmente podría trabajar con la posición absoluta y darles medidas fijas pero me pasaría el caso anterior, luego para el diseño responsive también lo tendría complicado.

Ésto es lo que me gustaría que pasara;



Pero si no uso posiciones abolutas, solo relativas, ésto es lo que obtengo:



El código css es éste (ahora mismo lo he dejado con un margin en el footer para que me quede bajo el Slideshow):


Le doy muchas vueltas y no doy con la respuesta, si la imagen fuera fija no sería problema, pero al no serlo estos son los resultados (lo ideal habría sido poner un background al header, tal y como estaba en la plantilla original, pero si quería poner un slideshow no he visto otra manera porque imagino que un vídeo, de fondo, no se puede poner con css).

Gracias!

Bueno, pues finalmente, terminé con el uso de la posición absoluta y medidas exactas para algunas de las cajas y ya me ha cuadrado todo. El diseño responsivo lo he podido ajustar decentemente así que puedo decir que he resuelto el problema ;)