Content

O Content é a coluna central e que ocupa mais espaço, pois é onde entra o conteúdo do site, normalmente dinâmico, por exemplo, textos, fotos e vídeos.

#content
{
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;

}

#content h2 {
margin: 0;
}

SideBar

O sidebar é a coluna lateral, onde podemos inserir conteúdo. Para o código a seguir colocaremos um texto simples:

#sidebar
{
float: right;
width: 200px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}

#sidebar h3 { margin: 0; }

Footer

Footer é o rodapé do site, onde podemos colocar informações complementares, como alguns links menos importantes, por se tratar de uma área de pouca visão de leitura.

#footer
{

clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;

}

Markup HTML

A marcação HTML é a estrutura do nosso site de exemplo, onde estão as Tags HTMLs, necessárias pra obtermos o resultado esperado. Cada ID em nosso HTML tem um ID no CSS que mencionamos anteriormente.










Page heading

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet

Ut amet, diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Neste artigo obtemos uma pequena introdução sobre a estrutura HTML para fazer um hot site, que pode ser usada para criar seu primeiro site.