O layout é fácil com CSS. Se você está acostumado a usar layout de tabela, será difícil no início. Não é difícil, apenas tem motivações diferentes e faz mais sentido na prática.

Você pode tratar cada seção desta página como uma seção separada, independentemente da seção escolhida. Você pode substituir este bloco por aquele bloco de forma absoluta ou relativa.

position é usado para definir se um elemento é absoluto, relativo, estático ou fixo.

Valores estáticos são os valores padrão dos elementos, que são gerados na ordem normal em que aparecem no HTML.

relativo é como estático, mas você pode usar as propriedades superior, direita, inferior e esquerda para compensar a posição original.

Absoluto separa o elemento do fluxo normal do HTML e o envia para um mundo de posicionamento inteiramente próprio. Neste mundo um pouco maluco, este elemento absoluto pode ser colocado em qualquer lugar, desde que os valores superior, direito, inferior e esquerdo estejam definidos.

Fixo também se comporta como absoluto, mas coloca elementos absolutos em relação à janela do navegador em relação à página, portanto, em teoria, os elementos fixos permanecem completamente na janela de visualização do navegador quando a página rola. Por que teoricamente? No mínimo, funciona bem no Mozilla e no Opera, mas não no IE.

Você pode usar o posicionamento absoluto para criar um layout tradicional de duas colunas usando regras semelhantes às seguintes em HTML:

Ra ra banjo banjo

Bem-vindo ao Ra ra página de banjo banjo.

(Ra ra banjo banjo).

Você verá, uma barra de navegação com comprimento de 10em é definida à esquerda. Como a navegação está absolutamente posicionada, ela não terá nenhum impacto no fluxo do resto da página, então tudo que você precisa fazer é definir a largura da borda esquerda da área de conteúdo para ser igual à largura da navegação bar.

É tão fácil! No entanto, você não está limitado por esta abordagem de duas colunas. Com o posicionamento inteligente, você pode dispor quantos blocos precisar. Por exemplo, se você precisar adicionar uma terceira coluna, você pode adicionar um bloco "navigation2" ao HTML e aplicar o seguinte CSS:

O único efeito colateral do posicionamento absoluto dos elementos é que, como eles vivem em seu próprio mundo, não há como decidir exatamente onde eles irão parar. Se você usar o exemplo acima em uma área com menos navegação e mais conteúdo, não há problema, mas, especialmente ao usar valores relativos de comprimento e largura, muitas vezes você terá que perder a esperança de colocar algo como notas de rodapé abaixo. Se você realmente quiser fazer isso, em vez de posicioná-los de forma absoluta, flutue-os.

Floating moverá um elemento para a esquerda ou direita da mesma linha, enquanto o conteúdo ao redor irá flutuar.

Flutuar é frequentemente usado para posicionar pequenos elementos dentro de uma página (no CSS padrão original deste site, o link "próxima página" do Guia Básico de HTML e do Guia Básico de CSS é flutuado para a direita. Veja também: primeiro em pseudo-elementos exemplo de letra), mas também pode ser usado em blocos maiores, como colunas de navegação.

Se você não quiser que o próximo elemento envolva o objeto flutuante, você pode usar a propriedade clear. clear: left limpará o elemento esquerdo, clear: right limpará o elemento direito e clear: ambos limpará os elementos esquerdo e direito. Então, por exemplo, você precisa de um rodapé de página, você pode adicionar um bloco ao HTML com o id "rodapé", e então usar o seguinte CSS:

Bem, você acertou. Uma nota de rodapé aparece em todas as colunas, independentemente do tamanho de cada coluna.

abordamos posicionamento e flutuação em geral, com ênfase nos blocos "grandes" da página, mas lembre-se de que esses métodos também podem ser usados em qualquer elemento dentro desses blocos. Combinando posicionamento, flutuação, bordas, preenchimento e bordas, você pode reproduzir qualquer design de layout. Em termos de layout, não há nada que as tabelas possam fazer sem CSS.

A única razão para usar um layout de tabela é se você estiver tentando acomodar navegadores antigos. É aqui que o CSS realmente mostra seu avanço: as páginas de alta usabilidade são uma fração do tamanho do arquivo das páginas baseadas em tabelas.

Layout de página do tutorial avançado de CSS

Ra ra banjo banjo