Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Este layout de 3 colunas tem as colunas laterais fixas e a coluna central fluida e ainda uma faixa superior de cabeçalho. As DIV's que compõem o layout são:
#topo - define a faixa superior de cabeçalho;
#conteudoEsq - define a área onde está o texto e conteudos da coluna esquerda;
#colunaEsq - define a área sobre a qual será colocada a div conteudoEsq;
#conteudoDir - define a área onde está o texto e conteudos da coluna direita;
#colunaDir - define a área sobre a qual será colocada a div conteudoDir;
#sepESqcolCentral - define a linha vertical de 2 pixel, que separa a coluna esquerda da coluna central;
#sepcolCentralDir - define a linha vertical de 2 pixel, que separa a coluna central da coluna direita;
#colCentral - define a área do conteúdo da coluna do meio ;
Neste exemplo, para os nomes das colunas usamos os termos "esquerda" "central" e "direita" somente para facilidade de visualização e entendimento do layout.
Nos seus projetos NÃO use nomes relacionadas com o ASPECTO (ou apresentação), use nomes relacionados com a FUNÇÂO.
Neste exemplo uma solução semanticamente correta seria:
colEsq ==> colNavPri (coluna de navegação principal)
colDir ==> colNavSec (coluna de navegação secundária)
colCentral ==> colConteudo
body {
margin:0 0 5px 0;
padding:0;
background-color:#444;
font:italic 14px/1.5em
Verdana, Arial, Serif;
}
#topo{
width:auto;
height:50px;
background-color:#333;
border-top:1px solid #666;
border-bottom:2px dotted #666;
color:#0f0;
text-align:center;
}
#conteudoEsq {
position:absolute;
width:190px;
top:60px;
left:5px;
color:#99f;
padding-bottom:20px;
border-bottom:3px double #666;
}
#conteudoDir {
position:absolute;
width:140px;
top:60px;
right:5px;
color:#99f;
padding-bottom:20px;
border-bottom:3px double #666;
}
#colEsq {
background:#444;
}
#sepEsqcolCentral {
margin-left:200px;
padding-left:2px;
background:#666;
}
#colDir {
background:#444;
margin:0px;
}
#sepcolCentralDir {
margin-right:150px;
padding-right:2px;
background:#666;
}
#colCentral {
background:#22232F;
color:#991;
padding:2px 10px;
text-align:justify;
border-bottom:1px solid #666;
}
.......
<body>
<div id="topo">
<h1>TOPO</h1>
</div>
<div id="conteudoEsq">
<h3>COLUNA ESQUERDA</h3>
<p>Lorem .... </p>
</div>
<div id="colEsq">
<div id="sepEsqcolCentral">
<div id="colDir">
<div id="conteudoDir">
<h3>COLUNA DIREITA</h3>
Lorem ipsum ...
</div>
<div id="sepcolCentralDir">
<div id="colCentral">
<h1>COLUNA CENTRAL</h1>
<h3>Abaixo a folha de estilo
deste layout:</h3>
..............
<h3>E abaixo o código HTML</h3>
.......
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Revisão em: 09 janeiro 2005