Nós precisamos adicionar 5 div's, todas com id's individuais que descrevem sua finalidade. Estas divs correspondem às áreas do design que nós identificamos na parte 2. Troque o texto Hello World. pelas div's abaixo. Nós vamos inserir texto dentro das div's somente para facilitar a identificação visual quando visualizarmos a página.

        <div id="page-container">
            <div id="main-nav">Main Nav</div>
            <div id="header">Header</div>
            <div id="sidebar-a">Sidebar A</div>
            <div id="content">Content</div>
            <div id="footer">Footer</div>
        </div>

Sua página deve ficar assim:

Sem CSS as div's serão arranjadas do topo para baixo, uma após a outra, na mesma ordem que estão no código. Isto é comumente referido como o "fluxo" do documento.

Bem, vamos então utilizar a informação que temos para fazer nossas div's ficarem do tamanho correto.

Remova o fundo vermelho da #page-container, e adicione uma nova regra para #main-nav. Mude o fundo da #main-nav para vermelho para que possamos vê-la, e atribua sua altura para 50px:

        #page-container {
            width: 760px;
            margin: auto;
        }

        #main-nav {
            background: red;
            height: 50px;
        }

Note que nós não especificamos a largura da div. Isto por que, por padrão, a div vai se esticar até preencher seu contêiner-pai, que neste caso, é nosso div #page-container que foi configurado para 760px de largura.

Faça a mesma coisa para a div cabeçalho (header), utilizando a altura que usamos no primeiro passo. Use a cor azul para o fundo.

        #header {
            background: blue;
            height: 150px;
        }

Já que estamos aqui, vamos configurar o rodapé (footer). Use a cor laranja para o fundo.

Lembre-se de que quando escrever sua folha-de-estilos, você pode agrupá-los. Então todos os estilos do cabeçalho (header) poderiam vir juntos. Todos os estilos do rodapé (footer) poderiam estar juntos, e os estilos de navegação poderiam estar juntos. Eu também acho que estruturar a folha-de-estilos similar à ordem do HTML ajuda bastante. Assim sendo, header fica próximo ao topo, footer ao final.

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

Agora as próximas duas div's são ligeiramente diferentes. Sua altura é dependente do conteúdo que vai dentro delas, portanto não vamos atribuir sua altura. Vamos pintá-las de verde-escuro e verde. Coloque as novas regras entre as regras header e footer na folha-de-estilos. Fica mais fácil encontrá-las, uma vez que a folha-de-estilo está ficando maior.

        #header {
            background: blue;
            height: 150px;
        }

        #sidebar-a {
            background: darkgreen;
        }

        #content {
            background: green;
        }

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

Se tudo correu bem, você deve ter uma página que se parece com isso:

Voltar   Avançar