Duplicado del margen ("padding") de un "DIV" en Internet Explorer 6

Estaba trabajando en la maquetación de una web con posiciones relativas. Empleé un contenedor general con un ancho total width:100%; y lo único que necesitaba era una "capa" que se posicionara a la izquierda de mi contenedor float:left;. Además necesitaba otra "capa" que se posicionara en la parte derecha float:right;.

En la imagen se muestra el resultado buscado:

Mi problema surgió cuando añadí en mi CSS una nueva declaración en el estilo de la "capa" que yo posicioné a la izquierda de mi contenedor padding-left:2%; . Esto lo hice así para que no quedara totalmente situada a la izquierda de la pantalla.

Mi sorpresa fue al comprobar que en Internet Explorer 6 este margen se ampliaba al doble de su tamaño. Es decir, si yo asigné un margen de un 2%, éste lo interpretaba como si el margen asignado fuese de un 4%.

La solución fue asignar al estilo de la "capa izquierda" la propiedad display con el valor inline (display:inline;), con el fin de adaptar el margen perfectamente a su tamaño original.

Aquí se muestra una imagen de la vista del problema y de su solución:

Aquí se muestra el código de la solución:

El estilo del "Contenedor":

#contenedor {
width:100%;
}

El estilo del "Contenedor Izquierda" :

#izquierda{
width:73%;
position:relative; float:left;
padding-right:2%; display:inline; }

El estilo del "Contenedor Derecha" :

#derecha{
width:25%;
position:relative;
float:right;
}

Código HTML:

<div class="contenedor">
<div class="izquierda"></div>
<div class="derecha"></div>
</div>