Linux / PHP / Java / Designer

As melhores dicas estão aqui.

Dominando a propriedade FLOAT

| 0 comentários

BOA DICA PARA A PROPRIEDADE FLOAT

POR: CRISTIANO  (TUIN007)

Para começar, vou usar uma estrutura Html simples com 3 tags Div:

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

Tutorial Div 1

O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante da página. 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%; }

Tutorial Float 2

Mas isso pode gerar uma série problemas mais a frente no desenvolvimento. Vamos analizar o que pode dar errado e entender porque.

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

Layout Trepado

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>

Muito bom, agora que o seu float está integrado com o restante do conteúdo da maneira que você queria, falta o apenas um detalhe.

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.

Float trepado 2

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.

Veja como é simples:

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

Float Ok

Resolvido o problema......

Deixe uma resposta

Campos requeridos estão marcados *.