Internet Explorer - Espaço entre divs flutuados

Question

Eu tenho encontrado um problema de apresentação com o Internet Explorer. O seguinte bloco simples de código renderiza como eu esperaria que ele fosse em Safari, Firefox, Chrome e Opera. No entanto, resulta em um perceptível espaço Entre os elementos DIV flutuados esquerda e direita, tanto no IE6 quanto no IE7.

Minha pergunta é: existe mais correto Maneira de obter um flutuador de modo que o mesmo CSS funcione no IE e nos outros navegadores que mencionei? Caso contrário, qual é a melhor abordagem para se livrar do espaço no Internet Explorer?

Obrigado, 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>

Como este é um wiki da comunidade. Eu pensei em postar o código de trabalho com a solução proposta abaixo pelo Plano 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

Flutue os dois para a esquerda, adicione o seguinte após os dois Divs:

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

 .clear { clear: both; }

Isso ou use preenchimento em vez de margens.

Answer 2

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

Answer 3

É o bug de flutuação de margem dupla. Descrito bem aqui:

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

Answer 4

Tente adicionar display: inline para divs flutuados. Eu acredito que este é um bug do IE de adicionar mais margens a elementos flutuados. Exibição: Inline trabalhou para mim no passado. Espero que isto ajude.