percentage positioning (google example)

Question

I have a website which is very basic. A header bar at the top of the page - a bit like this website or Facebook, a textbox and a submit button at the bottom of the page.

The problem I'm having is to do with the positioning of both the textbox and the submit button. I'm positioning them with percentages. The reason being - when I've used px to position, the layout appears different on different screens.

What I'm trying to achieve is something the Google homepage achieves with it's textbox positioning. I need my textbox and submit button to appear in a fixed position on everybody's screen, however, whenever the screen is minimised I dont want the textbox or submit button to stick to the bottom of the page. As I move the constraints of the browser around, the two elements overlap and it gets messy.

How do I achieve that?

Here's my CSS

#topbanner{
position:fixed;
top: 0px;
left: -150px;
min-width: 100%;
min-height:30px;
}

#textbox{
position: fixed;
top: 90%;
left:8%;    
width: 850px;
}

#submitbutton{
position:fixed;
top: 85%;
left:70%;
}

Thanks guys.