.
Aurium.Colivre.Coop.br Esse site é Legal Demais para Internet Explorer

Aurium :: CSSHackSobreInterferênciaDeFloats

Últimas blogadas:

%HEADLINES{"http://softwarelivre.org/aurium/blog/feed" refresh="600" header="SoftwareLivre.org" limit="15" format=" * $title" }% %HEADLINES{"http://cirandas.net/aurium/blog/feed" refresh="600" header="Cirandas.net" limit="15" format=" * $title" }%



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:
Resultado 1

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:
Resultado 2

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:

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. wink

DiggThis

Topic attachments
I Attachment Action Size Date Who Comment
Resultado1.pngpng Resultado1.png manage 1 K 08 Oct 2005 - 23:25 AurelioAHeckert  
Resultado2.pngpng Resultado2.png manage 1 K 09 Oct 2005 - 00:10 AurelioAHeckert  
Copyright © 2004 - 2019 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa