Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.

Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.

Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:

overflow: hidden;

* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.

2 comentários

Responder
  1. 17 de fevereiro de 2009

    Rodapé fixo | Blog Web Standards disse:

    […] XHTML foi inserido a classe “contemfloat” na div#conteudo porque dentro dela contém elemento com […]

  2. 20 de abril de 2009

    Maria José Speglich disse:

    Eu estou com problema no meu.

    Do nada a coluna ficou lá embaixo.

    Estava lindo, de repente deu esse rolo.

    Já tentei de tudo. O que fazer?

    Obrigada!

Escreva seu comentário