CSS: position changing on changin resolution

CSS: position changing on changin resolution

I am making a header for my website. I have a search box in the header and
the search results should appear right below it. I adjusted the position
of the search results div but when i changed the resolution of the screen
the div moved away. I have the following code in html:
<div id = "header">
<div id = "header_wrapper">
<div id = "search_results">
</div>
</div>
</div>
And in the CSS:
*{
margin:0px;
}
#header{
width:100%;
border:1px solid #f1f1f1;
height:100px;
}
#header_wrapper{
width:1000px;
margin:auto;
border:1px solid #f1f1f1;
height:100px;
}
#search_results{
position:absolute;
left:30%;
height:100px;
width:500px;
border:1px solid #f1f1f1;
top:100px;
}
How can I adjust the div so that it does not change its relative position
with it's parent div on changing the screen resolution.Please help