Erm. I edited my answer too long and can’t go back and edit. I was going to explain a few things:
If you use h1 for the branding image, you can set the text-indent to -999px to hide the text. That makes your site degrade nicely if the stylesheet isn’t loaded. Then you can set h1 to be a block element through display:block. You can then set the height and width and background image. I’d suggest making the header just one image.
For the headlines div, you have two options. Set the margin-top to somerthing negative and add a z-index so that it sits on top of the header, or absolutely position it and add a z-index so that it sits on top of the header. You could export the orange box as a separate image (transparent png) or you could just leave the orange box as part of the header image and keep the headline div without a background.
It make sense semantically to use a list for the navigation, because without stylesheets, your list of links makes sense. Again you can strip list style from a list and the set the ul as a block element and style away.
For the content you could set the background color to that olive green color, then add the background image of her and set the background-position so that it’s in the right place.
Of course this is all if you want your page to make sense semantically. One of my pet peeves is web designers who insist on laying things out for an html table, but then implement it with css. Just because you’re not using a table for your table based layout doesn’t quite make it a not table-based layout In reality with this layout, you could have the whole britney vector as one image (transparent background) and position that. You could have the headlines as an orange transparent box and then position that. You don’t have to slice things up.
If you implement it my way it’s much easier to change the style in the future.