How to keep image elements visible when resizing a browser window

[sniperman]

I'm having trouble trying to keep elements within a right navigation bar (nested within divs) from sliding behind the browser when i resize the browser window smaller. I can see on this "Post New Thread" window for example how div blocks positioned on the right of screen keep 100% proportion when the browser window drags across from right to left.

How do i create the same effect in CSS or HTML for my DIVS. I don't want the images to disappear off screen.

[Snookerman]

This might be helpful: http://css-tricks.com/video-screencasts/10-fixed-width-fluid-width-elastic-width/ (http://css-tricks.com/video-screencasts/10-fixed-width-fluid-width-elastic-width/)

Good luck!

[sniperman]

thanks, that was a very helpful tutorial. i should just use styles to {float:right;} but my CSS for the main window is geared to use percentages 0, 0, 0, 79% so the navbar's behavior is difficult to refine.

The basic template I am having trouble with is here:

[removed link by request]

The problem is "forcing" the PINK navbar to remain anchored along the YELLOW navbar and to not go underneath the BLUE content area. There should be a z-index method to float the PINK navbar over the BLUE content, which I am not aware of. The PINK div is floated right and needs to keep its proportion. I hope to make it hover over the PINK content div. Does anyone know how to solve the problem?