Internet Explorer: espacio entre divisiones flotantes

Question

Me he encontrado con un problema de presentación con Internet Explorer. El siguiente bloque de código simple se representa como lo esperaría en Safari, Firefox, Chrome y Opera. Sin embargo, da como resultado un espacio notable entre los elementos DIV flotantes izquierdo y derecho tanto en IE6 como en IE7.

Mi pregunta es: ¿hay una forma más correcta de lograr un flotante de manera que el mismo CSS funcione tanto en IE como en los otros navegadores que he mencionado? Si no, ¿cuál es el mejor enfoque para deshacerse del espacio en Internet Explorer?

Gracias, Matt

<style>
.left {
    width:100px;
    float:left;
    border: solid black 1px;
}

.right {
    width: 100px;
    margin-left:100 px;
    border: solid red 1px;
}
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>

Dado que esta es una wiki comunitaria. Pensé en publicar el código de trabajo con la solución propuesta a continuación por el Plan B.

<style>
        .left {
        width:100px;
        border: solid black 1px;
        float:left;
    }

    .right {
        width:100px;
        border: solid red 1px;
        float:left;
    }
    .clear {
        clear:both;
    }
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>
<div class="clear"></div>
c

Answer 1

Flótelos a la izquierda, agregue lo siguiente después de ambos divs:

 <div class="clear"></div>

 .clear { clear: both; }

Eso o usar relleno en lugar de márgenes.

Answer 2

.body {
    padding:0px;
    margin:0px;
}

Answer 3

Es el error de flotación de doble margen. Descrito bien aquí:

http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 4

Intente agregar display: inline a divs flotantes. Creo que este es un error de IE al agregar más márgenes a los elementos flotantes. display: inline me funcionó en el pasado. Espero que esto ayude.