De largura fixa layouts são comuns, mas eles parecem um pouco estranho se o navegador não é a largura especificada no CSS3. Se o navegador é muito estreito, o layout não vai funcionar, e a segunda coluna (geralmente) desça para a próxima linha.

Se o navegador é muito grande, a página parece estar amassado na margem esquerda com uma grande quantidade de espaço em branco à direita.

A solução natural é a de fazer um projeto de largura fixa relativamente estreita que está centrado dentro toda a página.

Alguns têm chamado este tipo de projeto (de largura fixa flutuante centrada no navegador) um gelatina disposição, porque não é muito fluida e não completamente fixo.

Video: Viewport Percentage Units CSS HTML Layout Tutorial

Fazendo um corpo substituto com um todo div

Em qualquer caso, o HTML requer apenas um novo elemento, um todos div que encerra tudo dentro do corpo:

Corrigido layout Largura Centrado
Coluna esquerda
Coluna direita
Video: CSS Auto Adjusting Stretch Fit Web Site Layout Tutorial HTML5 Template
Rodapé

O conteúdo da página inteiras estão agora encapsulado em um div especial. Este div vai ser redimensionadas para uma largura padrão (tipicamente 640 ou 800 pixels). o todos elemento será centrada no corpo, e os outros elementos serão colocados dentro todos como se fosse o corpo:

#all {width: 800px; height: 600px; margin-left: auto-margin-right: auto-border: cinza 1px solid -} # cabeçalho {background-color: # e2e393-border-bottom: 3px black-texto- sólida align: center-width: 800px; height: 100px; padding-top: 1em -} # esquerda {float: left; width: 200px; clear: left; border-right: 1px preto altura sólida: 400px; padding-right: .5em -} # direito {float: left; width: 580px; height: 400px; padding-left: .5em -} # rodapé {width: 800px; height: 60px; text-align: center-background-color: # e2e393 -border-top: 3px double black-padding-bottom: 1em-clara: both-}

Como as obras de layout gelatina

Este código é muito parecido com o estilo, mas tem algumas novas funcionalidades importantes:

• 
  
  
  

  o todos elemento tem uma largura fixa. largura deste elemento vai determinar a largura da parte fixa da página.

• todos também necessita de uma altura fixa. Se você não especificar uma altura, todos será 0 pixels de altura, porque todos os elementos dentro dele estão flutuando.

• Centro. Lembre-se, para centralizar divs (ou quaisquer outros elementos nível de bloco) você definir -margem esquerda e margin-right tanto para auto.

  Video: PSD to HTML5 CSS3 Tutorial

• Faz não flutuador todos. o margin: auto truque não funciona em elementos flutuantes. todos não deve ter um flutuador atributo definido.

• Garantir as larguras interiores somam todosDe largura. E se todos tem uma largura de 800 pixels, certifique-se de que as larguras, bordas e margens de todos os elementos dentro todos somam exatamente 800 pixels. Se você for mesmo um pixel mais, algo se alastrem e estragar o efeito. Você pode ter que mexer com as larguras para fazer tudo funcionar.

• Ajustar as alturas: Se o seu projeto tem uma altura fixa, você também vai precisar mexer com as alturas para começar tudo de olhar exatamente correto. Cálculos vai chegar perto, mas você geralmente precisa passar algum tempo de qualidade mexer com medidas exatas para obter tudo certo.

Limitações do layout gelatina

layouts Jello representam um compromisso entre layouts fixos e fluidas, mas eles não são perfeitos:

• largura mínima implícita: navegadores muito estreitas (como celulares) não pode tornar o layout da maneira que quiser. Felizmente, o conteúdo ainda será visível, mas não exatamente no formato que você queria.

• espaço na tela desperdiçado: Se você fizer a parte processada da página estreitas, um monte de espaço não está sendo usado em navegadores de alta resolução. Isso pode ser frustrante.

• Complexidade: Embora esta técnica layout é muito mais simples do layouts baseados em tabelas, ainda é um pouco envolvidos. Você tem que planejar suas divs para fazer este tipo de trabalho layout.