how do I make my absolutely positioned divs stay in place?

Here is my wordpress site based on the Thematic theme:
https://kasparovchessfoundation.org/

I have two logos on the top right and a facebook ‘like’ btn that move out of place when the window is re-sized. I have them coded in this way:

– In my functions.php file:

function partner_logo_1() {
echo ‘<span id=”europe-image”></span>‘;
}
add_action(‘thematic_header’, ‘partner_logo_1’);

function partner_logo_2() {
echo ‘<span id=”africa-image”></span>‘;
}
add_action(‘thematic_header’, ‘partner_logo_2’);

function facebook_like_btn() {
echo ‘<iframe src=”//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.kasparovchessfoundation.org%2F&send=false&layout=button_count&width=450&show_faces=false&font&colorscheme=light&action=like&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:21px; position:absolute; right:111px; top:200px;” allowTransparency=”true”></iframe>’;
}
add_action(‘thematic_header’, ‘facebook_like_btn’);

and then in kasparov_style.css:

#europe-image {
background:url(“images/europe_logo_04.png”) no-repeat transparent;
height: 103px;
width: 92px;
position:absolute;
cursor: pointer;
top:85px;
right: 29%;
*/right:600px;*/
}

#africa-image {
background:url(“images/africa_logo_06.png”) no-repeat transparent;
height: 102px;
width: 113px;
position:absolute;
cursor: pointer;
top:85px;
right: 22%;
*/right:480px;*/
}

Also, I have a div that says, “Kasparov Foundation Inc., is a non-profit educational organization…” that is added in the same way. In the fucntions.php file:
function donate(){
if ( is_front_page() ) {
?>
<div id=”donate”><p>Kasparov Chess Foundation Inc. is a non-profit educational organization supported by charitable donations from concerned individuals and corporate sponsors.</p></div>
<?php
}
}
add_action(‘thematic_aboveheader’,’donate’);

in kasparov_style.css:
#donate {
background: url(images/donations_back.png) no-repeat;
font:11px “Trebuchet MS”, Helvetica, sans-serif;
line-height: 20px;
/*background-color: #DAEFEE;*/
position:absolute;
top: 566px;
right: 13%;
*/right: 466px;*/
height: 100px;
width: 290px;
z-index:9999;
padding: 14px;
padding-top: 12px;
}

How do I make these stay in place when the window is re-sized on when the site is viewed on a smaller screen than my 15 inch screen?

Please help!