RESOLUÇÃO DE PROBLEMAS DE LAYOUT

* Listar alguns problemas de visualização de uma página web;

* Apresentar ferramentas que ajudam manipular o código
encontrando soluções para os problemas apresentados.


O float é uma propriedade meio imprevisível no CSS. Eis aqui um tutorial explicando passo-a-passo o seu funcionamento com alguns macetes que não dá pra encontrar em nenhum site de referência CSS.

Para começar, um exemplo de uma estrutura Html simples com 3 tags Div:

<div>
<div>Menu</div>
<div>Conteúdo</div>

</div>



O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do conteúdo. Se quisermos o menu à esquerda e o conteúdo à direita, o que os desenvolvedores geralmente fazem é:

.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }




Mas isso pode gerar uma série de dores de cabeça mais a frente no desenvolvimento. Vamos estudar o que pode dar errado e entender o porquê.


Esta técnica gera – principalmente no Internet Explorer – 2 erros de renderização:

1. Float sobrepõe o resto do site


Note que a borda do div pai que chamamos de “tudo” não está acompanhando os divs internos (.menu e .conteudo).



Para forçar o div “tudo” a circular também os objetos com float, mude o seu modo de exibição para table desta forma:

.tudo { display: table; }

UPDATE: um hack que pode funcionar melhor que o display:table; é adicionar uma div com clear: both; depois de todos os divs flutuantes.

.clear { clear: both; }
<div> </div>

Agora que o seu float está integrado com o restante do conteúdo da maneira que você queria, falta o cheque-mate.


2. Float:right não alinha com o Float:left

Quem já encontrou este problema sabe o quanto é irritante. Em alguns casos, as colunas não ficam uma do lado da outra NUNCA, por mais que você tente.



Para corrigir isso devemos usar o float da maneira correta. Ao invés de colocar float:left; no da esquerda e float:right; no da direita, colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente com um espaço de margem.

.menu { float: left; width: 30%; }
.conteudo { margin-left: 30%; }
Veja o código combinado de html e css:

<!-- CSS -->
<style rel="stylesheet" type="text/css">
.tudo { display: table; }
.menu { float: left; width: 30%; }
.conteudo { margin-left: 35%; }
</style>

<!-- HTML -->
<div>
<div>Menu</div>
<div>Conteúdo</div>
</div>



Finalmente, um float dentro dos padrões e funcionando em qualquer browser.