Markup HTML: SideBar e Footer Layout CSS com 3 colunas

Veja a última parte da criação do layout com css

Content

O Content é onde entra o conteúdo do site, é a coluna central e que ocupa mais
espaço por se tratar do conteúdo dos site, normalmente e a parte do site onde o
conteúdo e dinâmico, diferente do Header e Footer que a pouca mudança, aqui e
onde entra textos fotos e vídeos dependendo do conteúdo de um site.

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

}

#content h2 {
margin: 0;
}

SideBar

A lateral do site ou sidebar, chame como achar mais adequado é uma das
colunas do nosso site exemplo, seu conteúdo pode ser variado dependendo da
necessidade de cada cite, para fim de exemplo colocaremos um simples texto
neste espaço.

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

#sidebar h3 { margin: 0; }

Footer

Footer ou rodapé, e a parte inferior do site, podemos colocar informações
complementares do site , algumas vezes links menos importantes, por ficar em
uma área de pouca visão de leitura.

#footer
{

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

}

Markup HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>

<body>
<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="menuSuperior">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#"> Contato</a></li>
</ul>
</div>
<div id="content-container">
<div id="section-menuSuperior">
<ul>
<li><a href="#">Serviços 1</a></li>
<li><a href="#"> Serviços 2</a></li>
<li><a href="#"> Serviços 3</a></li>
<li><a href="#"> Serviços 4</a></li>
</ul>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut laoreet
</p>
<p>Ut amet, diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</p>
<p>Duis exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</p>
</div>
<div id="sideBar">
<h3>
Aside heading
</h3>
<p>
olore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
</div>
</div>

</body>
</html>

O HTML

A marcação html é a estrutura do nosso site exemplo, nela estão as Tags HTMLs necessárias pra obtermos o resultado esperado, cada ID em Nosso HTML tem um ID no CSS que falamos acima.

Conclusão

Neste artigo , obtermos uma pequena amostra de estrutura HTML para fazer um hot site, esta estrutura HTML pode ser usada pra criar sue primeiro site! Até a próxima! Mateus Bernardo Desenvolvedor Web