Trying to build from PSD, overlapping layers issue


This is my first post here. I’m beginning to dip into developing with PHP so I imagined I’d be using the forums for that, but my first question deals with a website I volunteered to do for a public awareness campaign in Ghana, West Africa.

I was given a PDF to work off of and I’m having trouble with the slider section of the PDF. (See attached Image).

The brown background content on the right is going to be static, but the image and caption on the left will be a slideshow.

To make the project more complicated, I’m creating it with a Zen Responsive Sub-Theme in Drupal because most Africans access the internet through their mobile phone. So it is important it looks good on smaller screens.

Does anyone have any suggestions or tips on how I should go about this? My initial reaction was to make the tan color a background and put the blue area in another div with a wrapper. Then I’d add a block for the slideshow and a block for the static content. I figured I’d use absolute positioning for this, but it isn’t convenient for responsive design.

Any help or tips are greatly appreciated

EDIT: It seems like putting the slideshow and static text on top of the blue background won’t be too difficult, but I might run into some responsive issues. I guess the most difficult part will be making the blue div sit nicely on the tan background. Hope these descriptions aren’t too confusing.