problema dos imágenes dentro de un header div

[Jor1980]

Hola en mi web tengo un div que actúa como wrapper para que todo el contenido de la web parezca dentro de él en el centro de la pantalla.

Dentro de este div tengo otro div llamado headerdiv en el que hay dos imágenes que ocupan todo su espacio. cuando la ventana está maximizada no hay problemas, pero cuando la minimizo estas imágenes se descuadran. como puedo hacer que queden fijas cuando minimizo dentro de mi headerdiv, una al lado de la otra?

Código:

.float-left{
float: left;
}
.float-right{
float: right;
}

#headerdiv{
	margin:0px;
	padding:0px;
	height:200px;
	background-color:#E60000;
	background-position:center;
	background-repeat:no-repeat;
}
#headerimage{
	margin:0px;
	padding:0px;
	position:relative;
}

Código:

 <div id="headerdiv">
		 
      
      
        <img src="images/mapfre.jpg" alt="" class="float-right" id="headerimage"/>
         <img src="images/header.jpg" class="float-left" id="headerimage" />
        
       
        
        
    </div><!--end headerdiv--->