Fix left and right floating images in HTML

[Jess]

Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.Setting\[code\]body { min-width: 800px;}\[/code\]I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change \[code\]position: relative\[/code\] but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its \[code\]min-width\[/code\] but that didn't seem to have an impact either. Using \[code\]min-width\[/code\] on the DIV and making the images children of the DIV didn't work either.My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?Thanks!