Bug da margem duplica no Internet Explorer 6

Este talvez seja um dos bugs mais conhecidos pelos desenvolvedores, e é também o mais fácil de ser corrigido.

Ele ocorre quando temos elementos flutuando dentro de um container.

Veja o exemplo:

XHTML:

<div id="container">
<div id="coluna1"></div>
</div>

CSS:
obs: as bordas foram adicionadas apenas para facilitar a vizualização dos elementos.

#container{
width:600px;
height:300px;
border:1px solid #000;
}

#coluna1{
float:left;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Nesse exemplo temos uma div com id container que contem outra div com id coluna1, a div coluna1 esta flutuado a esquerda dentro da div container, sendo que a div coluna1 também esta com margem esquerda de 20px. Bom, pelo menos deveria ter 20px, pois se executarmos o código no IE6 notaremos que na verdade a div esta distanciada em 40px.

Então, em resumo esse bug sempre ocorre no IE6 quando definimos uma margem do mesmo lado do float, como margin-left e float-left ou margin-right e float-right.

Visualização no IE6

Visualização no Firefox

Porque isso ocorre?

Provavelmente o programador da Microsoft não era muito bom de matemática. Mas brincadeiras de lado o fato de esse bug ocorrer é desconhecido, assim como a maioria dos bugs do IE.

Para corrigilo é simples, basta adicionar a propriedade display:inline na div coluna1 e as margens funcionarão normalmento no IE6.

Ficando assim o CSS da div coluna1:

#coluna1{
float:left;
display:inline;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Problemas com floats - Desobstruindo floats

Vamos ver aqui como resolver o seguinte problema: floats obstruidos.

O que é isso?

Quando temos um ou mais elementos flutuantes dentro de um container alguns navegadores não conseguem distinguir mais a altura dos elementos flutuantes fazendo com que o container se contrai-a.

Veja o exemplo na figura abaixo:

A div1 é container da div2 e div3 que estão flutuando, note que a div1 se contraiu ficando menor que a div2 ou div3.

O código que resultaria isso seria algo assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

Para resolver esse problema podemos criar uma div abaixo da ultima div que flutua e colocar nela o estilo clear:both, ficando assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div class="clear"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

.clear{
clear:both;
}

Na visualização:

E pronto, problema resolvido.

É muito comum iniciantes em layouts com css terem esse problema que geralmete pode ser resolvido sem marcação extra adicionando o clear:both no rodape da página.