Problema con capas en ie8

[mandrake88]

Hola:

Tengo un problema con unas capas en internet explorer 8. Les muestro el codigo y despues paso a explicarles cual es el problema

Código HTML:

<div id="paneles">
<div id="panel_01" style="margin:0 auto; margin-top: 10px;">
        <span style="float:left; width: 50%; padding-bottom: 6px;">
                 <table> // Contenido de la tabla </table>
        </span>
        <span style="float:right; width: 50%; padding-bottom: 6px;">
        </span>
                 <table> // Contenido de la tabla </table>
        <span style="float:left; width: 50%; padding-bottom: 6px;">
                  <table> // Contenido de la tabla </table>
        </span>
        <span style="float:right; width: 50%; padding-bottom: 6px;">
                <table> // Contenido de la tabla </table>
        </span>
</div>
</div>
 

Es un maquetado bastante simple, son 2 filas por 2 columnas. En Chrome, Mozilla, Opera me funciona perfecto. Pero en internet explorer sucede que las columnas no salen enfrentadas, es decir, el 1er span alineado a la izq, y el segundo que deberia estar a la misma altura pero alineado a la derecha, me sale abajo (alineado a la derecha si, pero abajo del otro span)
Baje los porcentajes del width 50%, y se soluciona, pero no me sirve asi, necesito que cada columna ocupe el 50% del espacio disponible

Alguna idea?