Expanding Is Fine. Contracting Isn't. [css Problem]

Hi

I hope someone out there can help.

Take a look at http://69.56.185.133/360/start.php

Note the people pic on the right, which correctly sticks on the right if you expand your browser.

But when you reduce the width of the browser, the image covers the navigation. What I want is for the image to 'stop' just before the My Account / Help / Login navigation so it doesnt cover it. Then its ok for the pic to disappear to the right. The important thing is the navigation. Using CSS how do I force the image to stop at a certain position when the browser width is reduced?

Thanks in advance.

I think that may be asking a lot of CSS. Somebody else may have an alternative, using javascript or something, but since we're speaking of resizing, I suggest you also look at what happens to your header and navigation menu when you increase text size in IE or Firefox (probably all others, as well).

One way to solve the problem you asked about is to incorporate the people pic into the header (combine into one image including the palm fronds and the blue "sky," so the people are fixed in one place and cannot move.

You can solve the navmenu thing in the CSS by specifying a fixed rather than relative font size (say, 12px instead of 85%). This way the navigation won't re-scale along with everything else, and the header will be nice and tidy at all resolutions. What you sacrifice by doing this is usability for some folks with poor vision, but the menu as you have it will remain accessible with such assistive devices as the JAWS screen reader.

CSS offers incredible flexibility, but if too much in the layout is allowed to move dynamically, pretty soon everything is colliding!