a little help - image placement

This should be simple. But, I can't figure this out. See attached screen shot for the layout I'm trying to achieve.

I'm trying to build out this simple site table-less as much as possible.

I need to 'overlay' the header picture of the woman on top of what will be the header div, and below that will be the nav div. This is all inside a 'mainContainer' div.

I remember a while back when I was sometimes doing absolute position you just tell it where to sit and set the z-index. I'm not sure how this'll work though.

Attached Images

Thelda_Williams.jpg (13.5 KB, 21 views)

Crop ALL that top stuff all together and make it one full header pic. The lady the blue bars, the text. Place that in the header div.

Do not put in the navigation.

Where the bottom blue bar is, position a nested navigation div with absolute positioning. When it is perfectly positioned to the right of the photo and INSIDE the blue bar, just add you <ul> inside that nested div.

Next you'll follow with a content div (white area) and then the footer div.

If this is fuzzy let me know and I'll try to elaborate!

well, I think I figured it out. I put it in the header div in a seperate div, gave it position:relative, set top and left, and float:left. Set z-index:100. Is this the correct way to do it?

Lchad - thanks! One thing though - the image is saved as a jpg, the text and graphics as a gif, so it's better to seperate them if possible.

There is always more than one way to do something I think. If it works in all the browsers than great.
I typically try to avoid relative positioning and absolute positioning if possible. If it works it's probably fine!

damn, looks like you were right. I couldn't the image placement correct across all browers Firefox and Netscape worked as planned - IE didn't

I just really don't like that setup becuase it's a much larger image than necassary, and plus, the photographic image should really be a jpg, not a gif

When I put in the menu bar, I used the position:absolute, then set the top align, but, it wasn't happy with the left align. I ended up using padding to get it into place. Align right only worked in IE

hahaha.. I do love it when I'm right! Are you all set then or do you have any issues with it still?