title: The best way for positioning header elements?
body: <p>I have a <code>div</code> header with <strong><code>position:fixed</code></strong> which has logo, menu and search option inside.
  Logo is positioned on the left, menu in the middle and search on the right, logo and menu  have relative positions, while search has <strong><code>position:absolute</code></strong>. </p>
  
  <p>Now, here comes the problem. When I resize my browser window, the search div stays on fixed distance from the top right corner of <strong>browser window</strong>, and then when I resize it more,  it overlaps with menu div and pushes it down. </p>
  
  <p>I'm not sure whats the problem, but I would like to have the following: I want my header to be on the top, but when I resize the window I don't want the search and menu to move, I just want them not to move, and if the window is resized over them, they shouldn't be seen.</p>
  
  <p>So what is the best way to do this? Keep the header div fixed and position other divs absolute, or relative, or something third?</p>
  
  <p><a href="http://jsfiddle.net/8Bwg9/" rel="nofollow">jsfiddle</a></p>