Floats (flutuadores) pode ser um conceito enganoso para fazer você perder a cabeça. Basicamente um float é um elemento que é alinhado contra os lados esquerdo ou direito do seu contêiner. Para maiores detalhes, leia maxdesigns in depth introduction to floats. (em inglês).

No caso deste website, nós vamos fazer flutuar (float) nossa div#sidebar-a à direita, com a largura de 280px. Adicione o seguinte à sua CSS:

        #sidebar-a {
            float: right;
            width: 280px;
            background: darkgreen;
        }

Você agora fez flutuar com sucesso sua primeira div, e você agora deve ter uma página que se parece com isso:

Somente para o propósito de testes, substitua o texto do conteúdo da div para o seguinte:

        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer 
            adipiscing elit. Nullam gravida enim ut risus. 
            Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. 
            Maecenas in lectus. Donec in sapien in nibh rutrum gravida.
            Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate.
            Nullam rhoncus mauris ac metus.
            Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. 
            Nam augue lorem, semper at, porta eget, placerat eget, purus. 
            Suspendisse mattis nunc vestibulum ligula.
            In hac habitasse platea dictumst.
        </div>

Note que o texto rola no conteúdo da div flutuante, como visto abaixo:

Mas isto não é o que nós queremos. Nós queremos que o conteúdo da div seja distribuído através da div sidebar, a qual tem seu lado direito contra o lado esquerdo da barra lateral.

Um jeito fácil de conseguir isto num layout flutuante como esse, é colocar uma margem direita na nossa div content que tenha a mesma largura de nossa barra lateral, nesse caso 280px. Isto vai empurrar o canto direito do conteúdo fora do canto direito do page-container.

        #content {
            margin-right: 280px;
            background: green;
        }

Ótimo, nós quase conseguimos fazer nosso layout flutuante funcionar. Mas há uma coisa a mais que devemos considerar... O que acontece se a div sidebar ficar mais alta que a div content?

Vamos ver. Copie e cole este texto na div sidebar:

        <div id="sidebar-a">
            Lorem ipsum dolor sit amet, consectetuer 
            adipiscing elit. Nullam gravida enim ut risus. 
            Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. 
            Maecenas in lectus. Donec in sapien in nibh rutrum gravida.
            Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate.
            Nullam rhoncus mauris ac metus.
            Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. 
            Nam augue lorem, semper at, porta eget, placerat eget, purus. 
            Suspendisse mattis nunc vestibulum ligula.
            In hac habitasse platea dictumst.
        </div>

Isto não é o que queremos, afinal. A razão do rodapé não ter se movido pra baixo é porque a sidebar está "flutuada" à direita.

Explicação: Por padrão, qualquer elemento flutuante não empurrará para baixo elementos que estejam abaixo deles. Isto por que elementos flutuantes não são considerados parte do "fluxo" do documento. É como se eles estivessem em uma outra camada, "flutuando" acima dos outros elementos, e por causa disso não podem afetar suas posições.

E o que nós podemos fazer para contornar este problema? Introduzir a propriedade clear da CSS.

Adicione isto à sua folha-de-estilos:

        #footer {
            clear: both;
            background: orange;
            height: 66px;
        }

Quando um elemento tem sua propriedade clear atribuída, se ele entrar em contato com um elemento flutuante, ele é colocado exatamente abaixo de onde o flutuante termina. Você pode especificar se ele é afetado somente por flutuadores esquerdos ou direitos, neste caso nós poderíamos utilizar tanto right ou both. Nós vamos utilizar clear: both somente por segurança.

Voltar   Avançar