No passado, muitos sites usavam tabelas HTML para distribuir páginas porque esse método produzia consistentemente resultados confiáveis ​​em navegadores da Web mais antigos. Esta não era uma solução ideal, pois as tabelas são realmente destinadas a exibir dados tabulares em vez de distribuir páginas. O uso de tabelas também significava que o layout era codificado na página, tornando a tarefa de atualizar o site mais demorada. O Cascading Style Sheets introduziu a propriedade "float", permitindo que os designers flutuem elementos à esquerda ou à direita. Isso permite mais controle sobre a página e tem a vantagem de manter o layout do site separado do conteúdo.

1

Abra um editor de texto ou editor de HTML e crie um novo documento HTML.

2

Adicione o seguinte código ao corpo da página:

Salve a página e abra-a no navegador da Web. Você verá que o conteúdo na segunda div é exibido sob o conteúdo na primeira div.

3

Insira o seguinte código CSS na seção do seu documento HTML:

Salve a página e atualize seu navegador para exibir as alterações. A regra CSS segmenta os dois divs aninhados no div “myContainer”. A propriedade “float” diz ao navegador para flutuar os divs para a esquerda - você pode alterar o valor float para “right” para flutuar os divs para a borda direita do div contido. As divs são definidas para uma largura fixa de 300 pixels e possuem uma borda preta de 1 pixel para facilitar a visualização do layout. No seu navegador, você verá que as caixas agora são exibidas lado a lado.

4

Adicione um terceiro div ao corpo da página, fora do div “myContainer” como mostrado abaixo:

Salve a página e recarregue-a no seu navegador. Você verá que a terceira div é exibida ao lado do primeiro e do segundo divs, mesmo que não tenha sido exibida. Isso ocorre porque os elementos HTML restantes fluem em torno dos elementos flutuantes. Isso pode ser um comportamento desejável em alguns casos, mas neste exemplo, queremos que a terceira div seja exibida sob os divs flutuantes para criar um rodapé.

5

Insira a seguinte regra na seção de estilo no cabeçalho da página:

myFooter {

clear: both; 

}

Isto tem como alvo o terceiro “myFooter” div e diz ao navegador para descontinuar o float e exibir os elementos HTML subseqüentes abaixo do div “myContainer”. Salve e atualize a página. Você verá que o rodapé formado pelo terceiro div agora é exibido abaixo dos divs flutuantes.

Gorjeta

• Você pode usar a propriedade "margin" do CSS para criar um espaço entre divs flutuantes.