Passo 3 - Escolher e Especificar o Método de Posicionamento para os Containers

Além dessas regras, foram definidas alturas para os containers. Com isso, tem-se uma ideia melhor do posicionamento deles. A Figura 3, a seguir, ilustra o resultado dessas regras CSS. Veja também o código relacionado.

See the Pen Autoria Web - Aula 08 - Figura 03 by Materiais (@materiais) on CodePen.

Com isso, está definida a estrutura geral do site.

Agora é necessário determinar qual a largura e altura real de cada um dos containers, bem como suas margens e bordas.

Lembre-se de que é importante, particularmente quando você está construindo um layout totalmente novo, que você teste em diversos navegadores sempre que terminar uma etapa, pois o comportamento do CSS nem sempre é o mesmo nos diferentes browsers. Isso evita ter que retornar a etapas já concluídas quando um problema ocorrer.

O comportamento de cada container pode variar quando os conteúdos forem inseridos neles. A técnica de colorir os containers permite que você trate e analise primeiramente o posicionamento de cada um deles, deixando as questões de conteúdos para a próxima etapa.