Fix div position no matter the screen resolution is - html

Question

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 ?
Take a look
here on a bigger resolution
the html looks as follows:
<div class="header">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 16px 10px 0 52px ;text-align: right; width: 230px; background: url('images/searchbar_dropdown.png') no-repeat scroll 72px 15px transparent;">
<select id="dept" name="dept" type="text" style="background-color: white; border: 2px solid rgb(182, 109, 49); width: 150px; height: 35px; opacity: 0;"><option></option>
</select></div></td>
<td rowspan="2" style="width: 2px;"> </td>
</tr>
</table>
</div>
and the header CSS
.header {
background: url("../../images/background.png") repeat;
position: fixed;
color: white;
min-height: 65px;
padding: 5px 5px;
margin: 0;
}

Answer 1

The select is flowing out for you because the fixed position
You will need a wrapper around the box with a position relative and the box as position absolute
Example:
<div id="boxWrapper">
<select class="selectbox">
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select>
</div>
#boxWrapper {
position: relative:
}
.selectbox {
position: absolute;
top: 0px;
left: 0px;
}

Answer 2

I believe it is likely a combination of your width: 100% on the table and your text-align: right on your td. I suspect your td is not acting as you want, and not keeping its width: 230px, but is expanding with the screen width along with the table. With the text-align: right the select element is then moving also. The easiest fix would be to position the select such that it is text-align: left, unless you intend it to be right and the background to follow (in which case how you have the background attached is what you need to correct).

Answer 3

Try this code
<div class="header">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding: 16px 10px 0px 52px; text-align: right; width: 230px; background: none repeat scroll 0% 0% whitesmoke; position: relative;">
<select style="border: 2px solid rgb(182, 109, 49); height: 35px; background: none repeat scroll 0% 0% yellow; opacity: 1; position: absolute; width: 150px; left: 0px;" type="text" name="dept" id="dept"><option></option>
</select></td>
<td style="width: 2px;" rowspan="2"> </td>
</tr>
</tbody></table>
</div>