Problemas con DIV en Firefox

[jotaincubus]

Buen dia para todos... y de antemano muchas gracias al que me pueda colaborar.

mi problema radica en lo siguiente:

Tengo el siguiente codigo HTML con el cual quiero colocar 3 DIV (IZQUIERDA - CENTRO - DERECHA) uno al lado del otro dentro de un DIV contenedor

Código HTML:

<div id="contenedor">
	
	<div id="superior">
		<span>hola</SPAN>
	</div>
	
	<div id="arriba">
		<span>hola</span>
	</div>

	<div id="izquierda">
		<span>hola</span>
	</div>

	<div id="centro">
		<span>hola</span>
	</div>

	<div id="derecha">
		<span>hola</span>
	</div>

	<div id="abajo">
		<span>hola</span>
	</div>

Y el siguiente codigo CSS

Código:

#contenedor {
border:1px solid black;
margin:0;
padding:0;
width:1050px;
}

	#superior {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#arriba {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#izquierda {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:20%;
	}

	#centro {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:57%;
	}

	#derecha {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:20%;
	}

	#abajo {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

En INTERNET EXPLORER va de lujo... pero en FIREFOX el DIV DERECHO me aparece en la parte de abajo, no se acomoda al lado derecho del DIV CONTENEDOR, ni colocandole FLOAT:RIGHT La verdad no entiendo porque si el porcentaje total de los 3 es de 97% si esto es asi, tendria espacio suficiente para los MARGIN de los tres y se me colocarian los 3 horizontalmente. Pero en FIREFOX no funciona.

Muchas gracias por su ayuda.

Juan Esteban