Template Layout

A construção de layouts com CSS tem se constituido na grande "dor de cabeça" dos desenvolvedores comprometidos com os padrões web. Você encontra na Internet uma infinidade de layouts CSS prontos ou mesmo ferramentas online geradoras de layouts personalizados. Contudo até mesmo estas ferramentas têm suas limitações, pois é impossível contemplar todas as variantes de personalização.

 Assim, quando se trata de layouts intrincados e fora de determinados padrões, até mesmo os mais experientes desenvolvedores acabam por dispender tempo extra para resolver as inconsistências de renderização.

Document Flow

 Um documento de fluxo é projetado para "conteúdo de refluxo", dependendo do tamanho da janela, resolução do dispositivo, e outras variáveis ​​de ambiente. Além disso, documentos de fluxo tem um número de construído em características, incluindo pesquisa, modos de visualização que a legibilidade otimizar e a capacidade de alterar o tamanho ea aparência das fontes.Documentos de fluxo são melhor utilizados quando a facilidade de leitura é o cenário de consumo primário documento. Em contraste, os Documentos fixos são concebidos para ter uma apresentação estática. Documentos fixos são úteis quando a fidelidade do conteúdo da fonte é essencial. 

Propriedade Position

 O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza apropriedade float do css. O Position vai servir para fazer coisas mais simples.

Existem 3 tipos de valores que usamos na propriedade position: fixed, relative e absolute.


Position Fixed
 O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente.


Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.

 O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.

Position Absolute
 O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

Propriedade Float

O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Se quisermos o menu à esquerda e o conteúdo à direita, vou descrever como isso é feito.Para começar, vou usar uma estrutura Html simples com 3 tags Div:

<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>




Agora para fazer com que o menu fique a esquerda e o conteúdo a direita, fazemos o seguinte:

.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 2 erros de renderização:

Erro1. 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 class="clear"> </div>

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

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

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 class="tudo">

<div class="menu">Menu</div>

<div class="conteudo">Conteúdo</div>

</div>

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