title: Fix div position no matter the screen resolution is
body: <p>This is my page header, it has a select menu and has to be positioned well on top of the background image, how do I fix it in position when screen resolution changes ?</p>
  
  <p>Take a look</p>
  
  <p><img src="https://i.stack.imgur.com/CEBfB.png" alt="enter image description here"></p>
  
  <p>here on a bigger resolution</p>
  
  <p><img src="https://i.stack.imgur.com/TWkmt.png" alt="enter image description here"></p>
  
  <p>the html looks as follows:</p>
  
  <pre><code>    &lt;div class="header"&gt;
              &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td style="padding: 16px 10px 0 52px ;text-align: right; width: 230px; background: url('images/searchbar_dropdown.png') no-repeat scroll 72px 15px transparent;"&gt;
                         &lt;select id="dept" name="dept" type="text" style="background-color: white; border: 2px solid rgb(182, 109, 49); width: 150px; height: 35px; opacity: 0;"&gt;&lt;option&gt;&lt;/option&gt;                                    
  &lt;/select&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td rowspan="2" style="width: 2px;"&gt;&amp;nbsp;&lt;/td&gt;
  
                      &lt;/tr&gt;
  
              &lt;/table&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>and the header CSS</p>
  
  <pre><code> .header {
  background: url("../../images/background.png") repeat;
  position: fixed;
  color: white;
  min-height: 65px;
  padding: 5px 5px;
  margin: 0;
  }    
  </code></pre>