title: Fix left and right floating images in HTML
body: <p>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.</p>
  
  <p>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.  <a href="http://jsfiddle.net/9wNEx/" rel="nofollow">Here</a> is a Fiddle that illustrates this effect with two floating images.  Resize the browser window to see how the two images overlap.</p>
  
  <p>Setting</p>
  
  <pre><code>body {
    min-width: 800px;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky.  That is why I used the <code>position: fixed</code> property for the DIV.  The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle <a href="http://jsfiddle.net/9wNEx/33/" rel="nofollow">here</a> which is based on ntgCleaner's answer.  This kind-of changes the whole thing, doesn't it!  Sorry about that...</p>
  
  <p>Thanks!</p>