Linha e coluna única
Aqui está uma citação:
corpo {margem: 0px; preenchimento: 0px;
#conteúdo {margem-esquerda:auto;margem-direita:auto;largura: 400px largura: 370px;
Duas linhas e uma coluna
Aqui está uma citação:
corpo {margem: 0px; preenchimento: 0px; alinhamento de texto: centro;}
#content-top {margem esquerda:auto;margem direita:auto;largura: 400px;largura:370px;}
#content-end {margem-esquerda:auto;margem-direita:auto;largura: 400px largura: 370px;}
Três linhas e uma coluna
Aqui está uma citação:
corpo {margem: 0px; preenchimento: 0px;
#content-top {margem-esquerda:auto;margem-direita:auto;largura: 400px;
#content-mid {margem-esquerda:auto;margem-direita:auto;largura: 400px largura: 370px;
#content-end {margem-esquerda:auto;margem-direita:auto;largura: 400px;
Linha única e duas colunas
Aqui está uma citação:
#bodycenter { largura: 700px;margem direita: automático; margem esquerda: automático;estouro: automático }
#bodycenter #dv1 {float: esquerda;largura: 280px;}
#bodycenter #dv2 {float: direita;largura: 410px;}
Duas linhas e duas colunas
Aqui está uma citação:
#header{ largura: 700px; margem direita: automático;margem esquerda: automático;
#bodycenter {largura: 700px; margem direita: automático; margem esquerda: automático;
#bodycenter #dv1 { float: esquerda; largura: 280px;}
#bodycenter #dv2 { float: direita;largura: 410px;}
Três linhas e duas colunas
Aqui está uma citação:
#header{ largura: 700px; margem direita: automático; margem esquerda: automático }
#bodycenter {largura: 700px; margem direita: automático;
#bodycenter #dv1 { float: esquerda;largura: 280px;}
#bodycenter #dv2 { float: direita; largura: 410px;}
#rodapé{largura: 700px; margem direita: automático; margem esquerda: automático;
Linha única e três colunas
posicionamento absoluto
Aqui está uma citação:
#esquerda {posição: absoluto; superior: 0px; esquerda: 0px largura: 120px;
#meio {margem: 20px 190px 20px 190px };
#direita {posição: absoluta; superior: 0px; direita: 0px largura: 120px;}
posicionamento flutuante um
xhtml:
Aqui está uma citação:
<div id="warp">
<div id="coluna">
<div id="column1">Esta é a primeira coluna</div>
<div id="column2">Esta é a segunda coluna</div>
<div class="clear"></div>
</div>
<div id="column3">Esta é a terceira coluna</div>
<div class="clear"></div>
</div>
CSS:
Aqui está uma citação:
#wrap{largura:100%;altura:auto;}
#coluna{ float:esquerda;largura:60%;}
#coluna1{ float:esquerda largura:30%;}
#coluna2{ float:largura direita:30%;}
#coluna3{ float:largura direita:40%;}
.claro{claro:ambos;}
posicionamento flutuante dois
xhtml:
Aqui está uma citação:
<div id="centro" class="coluna">
<h1>Este é o conteúdo principal.</h1>
</div>
<div id="esquerda" class="coluna">
<h2>Esta é a barra lateral esquerda.</h2>
</div>
<div id="right" class="coluna">
<h2>Esta é a barra lateral direita.</h2>
</div>
CSS:
Aqui está uma citação:
corpo {margem: 0; preenchimento à esquerda: 200px; preenchimento à direita: 190px; largura mínima: 240px;}
.column {posição: relativa; float: esquerda;}
#centro {largura: 100%;}
#esquerda {largura: 180px; direita: 240px; margem esquerda: -100%;}
#direita {largura: 130px;margem direita: -100%;}
Duas linhas e três colunas
xhtml:
Aqui está uma citação:
<div id="header">Aqui está a linha superior</div>
<div id="warp">
<div id="coluna">
<div id="column1">Esta é a primeira coluna</div>
<div id="column2">Esta é a segunda coluna</div>
<div class="clear"></div>
</div>
<div id="column3">Esta é a terceira coluna</div>
<div class="clear"></div>
</div>
CSS:
Aqui está uma citação:
#cabeçalho{largura:100%; altura:auto;}
#wrap{largura:100%;altura:auto;}
#coluna{ float:esquerda;largura:60%;}
#coluna1{ float:esquerda largura:30%;}
#coluna2{ float:largura direita:30%;}
#coluna3{ float:largura direita:40%;}
.claro{claro:ambos;}
Três linhas e três colunas
xhtml:
Aqui está uma citação:
<div id="header">Aqui está a linha superior</div>
<div id="warp">
<div id="coluna">
<div id="column1">Esta é a primeira coluna</div>
<div id="column2">Esta é a segunda coluna</div>
<div class="clear"></div>
</div>
<div id="column3">Esta é a terceira coluna</div>
<div class="clear"></div>
</div>
<div id="footer">Esta é a linha inferior</div>
CSS:
Aqui está uma citação:
#cabeçalho{largura:100%; altura:auto;}
#wrap{largura:100%;altura:auto;}
#coluna{ float:esquerda;largura:60%;}
#coluna1{ float:esquerda largura:30%;}
#coluna2{ float:largura direita:30%;}
#coluna3{ float:largura direita:40%;}
.claro{claro:ambos;}
#rodapé{largura:100%; altura:auto;}
PS: Os exemplos listados aqui são exemplos comumente usados, não para fins de pesquisa. Para cada caixa, margem, preenchimento, boeder e outros atributos não são definidos!