Svettband

Ok, Im almost there now.

This is what I got now and it works pretty well but when the browser resize then the image decides to pop out of the header-image area.
How do I prevent this?

Here is what happens when the browser gets to small:
Example

I want it to stay inside the header-image all the time.

The header and css now looks like this:
HEADER:

<div style="position: relative;">
	<?php if ( ( '' != get_header_image() ) ||  ( false != get_header_image() ) ) : ?>
        <a href="<?php echo home_url( '/' ); ?>" rel="home">
        <img id="header-image" src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" /></a>
    <?php endif; ?>
	    <img src="/wp-content/uploads/gfx/special/IMAGE.png" alt="IMAGE TO THE RIGHT" id="specimg" />
</div>

CSS:

#specimg {
	position: absolute; top:0; right:0;
	z-index: 2;
	padding:0.45%;
	max-height:100%;width: auto;width: auto\9; /* ie8 */
}
#header-image {
	display:block;
	max-width:99.1%;
	padding:0.45%;
	margin-bottom:1.76%;
	box-shadow:0 0 3px #999;
	background:#fff;
	z-index: 1;
}

So, why does this happen and how do I solve it?