title: Prevent div from moving while resizing the page
body: <p>I'm quite new to CSS and I'm trying to get a page up and running. I managed
  to successfully produce what I thought was a nice page until I resized the
  browser window then everything started to move around. I have no idea why
  this is happening!!</p>
  
  <p>Could someone offer me some advice please. When I resize the window I would
  like the 'objects' to stay where they are but the window to resize. for
  example, if I drag the bottom corner of a window up and to the left I'd
  expect to see what was at the bottom right disapear and scroll bars to
  appear but the object in the top left hand corner would stay exactly where
  they are.</p>
  
  <p>Am I making sence ?</p>
  
  <p>Have a look at working condition of my page : <a href="http://aimmds1.estheticdentalcare.co.in/" rel="noreferrer">http://aimmds1.estheticdentalcare.co.in/</a></p>
  
  <p>then try to resize the browser window by dragging the right size leftwards .
  and look at the content in header , and also the menubar .. they jump down ,, the header content was also jumping down then i make overflow: hidden ; .. but as i understand all this is not the right way.</p>
  
  <p>Please find the html and CSS here : <a href="http://jsfiddle.net/swati/hCDas/" rel="noreferrer">http://jsfiddle.net/swati/hCDas/</a></p>
  
  <p>I already tried <a href="https://stackoverflow.com/questions/4745923/prevent-div-moving-on-window-resize">prevent div moving on window resize</a> , i tried setting min-width:820px;  for div header , that the main containing div.. but that doesnt solve it.</p>
  
  <p>Thanks in anticipation of your help.</p>