CSS Hack sobre Interferência de Floats
O Problema
É comum um site ter seu menu a esquerda. Ao desenvolver um layout em
Tableless temos que fazer do menu um bloco flutuante a esquerda e o conteudo que fica ao seu lado recebe uma margem esquerda pouco maior que a largura do menu. Com essa construção, em alguns momentos, nos deparamos com o seguinte problema:
Um bloco com "limpeza" de flutuação (
clear: {left|both|right} ) será movido para que tenha sua posição
y seguinte a posição
y mais a altura do menu.
Isso me parece um Bug, pois o bloco do menu não é interno ao bloco do conteúdo. Ele não deveria participar da definição de reposicionamento de elementos neste.
Implementação errada do
padrão definido pela W3C? Estranho... Tanto o Mozilla quanto o Internet Explorer implementam desta forma. Como solucionar?
Exemplo do Problema
Resultado:
Esperava-se que
blo ficaria logo abaixo de
bli, porém o
clear: both não "limpou" apenas o bloco flutuante
bli, mas também o elemento
t1 que está fora do elemento
t2.
Temos o seguinte cídigo HTML:
<html>
<head>
<title> teste </title>
</head>
<body>
<div id="t1">
1<br/>2<br/>3<br/>4<br/>5
</div>
<div id="t2">
<div id="left"> bli </div>
<div id="clear"> blo </div>
</div>
</body>
</html>
E esse código CSS:
body{
background-color: #EEE;
text-align: center;
font-family: verdana;
font-size: 12px;
line-height: 14px;
}
#t1{
float: left;
text-align: center;
width: 20px;
border: 1px solid #F00;
margin: 2px;
}
#t2{
border: 1px solid #0B0;
margin: 2px;
margin-left: 30px;
padding: 2px;
}
#left{
float: left;
border: 1px solid #A0A;
}
#clear{
clear: both;
border: 1px solid #FA0;
}
Contornando o Problema
Resultado:
Colocando o bloco
t2 flutuando também ele para de receber interferência de
t1, mas infelizmente sua largura deve ser controlada pois ele passa a ter a largura de seu maior conteúdo e objetos centralizados não ficarão no centro do espaço planejado, mas sim do espaço ocupado.
O bloco
tudo é usado para que o
t2 não fuja e fique longe demais de
t1, isso poderia ser suprimido com o uso de
float:left em
t2, mas tendo o bloco
tudo podemos centralizar a dupla
t1 e
t2 e ter um layout mais interessante.
Pontos negativos:
- Exige um pouco mais de código que o esperado, felizmente ainda menos que as tabelas.
- Perde-se a liberdade de termos um espaço de conteúdo adaptável a largura do ambiente. Isso exige mais estudo e deve ser solucionado mesmo que exija mais código.
Foi preciso adicionar o bloco
tudo no HTML:
<html>
<head>
<title> teste </title>
</head>
<body>
<div id="tudo">
<div id="t1">
1<br/>2<br/>3<br/>4<br/>5
</div>
<div id="t2">
<div id="left"> bli </div>
<div id="clear"> blo </div>
</div>
</div>
</body>
</html>
E além de formatar o bloco
tudo houveram modificações na formatação de
t2:
body{
background-color: #EEE;
text-align: center;
font-family: verdana;
font-size: 12px;
line-height: 14px;
}
#tudo{
width: 132px;
margin: auto;
text-align: left;
border: 1px solid #00F;
height: 78px;
}
#t1{
float: left;
text-align: center;
width: 20px;
border: 1px solid #F00;
margin: 2px;
}
#t2{
border: 1px solid #0B0;
float: right;
width: 100px;
max-width: 96px;
margin: 2px;
padding: 2px;
}
#left{
float: left;
border: 1px solid #A0A;
}
#clear{
clear: both;
border: 1px solid #FA0;
}
Tem uma solução melhor?
Se tiver, por favor me escreva! Meu e-mail é
aurium arroba gmail ponto com e coloque o assunto
CSS Hack sobre Interferência de Floats.
É claro que postarei a solução com o nome do pai ou mãe da criança.
png 
