Vault7">

Um problema muito comum em layouts usando a propriedade é quando o “container” não se estica para acomodar as floats. Há muitas maneiras de se resolver isso, mas a maioria inclui código adicional no html, geralmente uma com ao fim do container. Mas todos nós sabemos que bagunçar o html com tags inúteis deixa a tia Semântica muito chateada. Assim, a minha solução preferida, bolada por Tony Aslett (fundador do site csscreator.com) consiste em adicionar um conteúdo “virtual” ao final do container usando no seletor a pseudo-classe , e aplicar o nele, mais algumas linhas para esconder este conteúdo, e impedir que este ocupe espaço no layout. Segue o código:

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

No trecho de css acima, estamos adicionando um ponto () no final do container identificado pela classe , setando sua propriedade e escondendo-o do layout. Funciona em qualquer browser…bom, menos no nosso querido IEca. Você não achou que ia ser fácil assim, não é? Mas com mais algumas linhas, resolvemos o problema:

/* fix para o IE7 */
*+html .clearfix {
  min-height: 1%;
}

/* fix para o  IE6 */
* html .clearfix {
  height: 1%;
  overflow: visible;
}

/* fix para o resto do mundo */
.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

E é isso. Não tenha medo das floats, elas são suas amigas :)

tags: css, hack, layout

Hacks são necessários, mas sujar o html realmente não me deixa satisfeito. E um dos muitos problemas que nosso amigo IE(ca)6 tem com CSS é a propriedade . Simplesmente não está implementada. Mesmo porque para o IE, o comportamento que deveria ser seguido com é o padrão para qualquer elemento com uma definida (graças á implementação incorreta da propriedade …). Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por Dustin Diaz:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Funciona assim: o IE6 tambem não implementa corretamente a declaração , e vai sobrescrever a declaração de com , “emulando” a propriedade . Todos os browsers modernos vão seguir a declaração , mantendo à salvo. Nasty. A brincadeira funciona no IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2. Nada de IE5.x, infelizmente. (quem liga? eu com certeza não! :P)

tags: css, hack, layout