Construindo um layout com 3 colunas usando CSS - parte 3
Monday, December 18th, 2006Depois de ter construÃdo um modelo simples com três colunas, o principal desafio era torná-lo em algo semelhante a uma tabela, ou seja, que sua colunas laterais acompanhassem a variação de altura da coluna principal, que normalmente é a coluna variável por causa do conteúdo.
Antes de começar a dar todas as explicações das alterações feitas da versão do código do post anterior para essa, é fundamental que você entenda com clareza o funcionamento do “Box model” descrito no post CSS Box model: Entenda com clareza essa definição.
Agora que você já sabe como funciona o CSS Box model e também para que serve uma tag DOCTYPE, vou descrever o que fiz no código abaixo. A primeira alteração feita foi ajuste de respiros e margens para as três colunas que dividem nosso layout. Para todas elas coloquei um respiro interno de 10 pixels e ainda, coloquei um distância também de 10 pixels da coluna principal das demais. Com essas primeiras alterações, o visual já dá uma boa melhorada pois fica tudo perfeitamente separado.
Depois dos respiros e margens, coloquei borda nas três colunas. Ela serve para marcar as colunas e demarcar as áreas do layout. Lembre-se que por causa do CSS Box model, tanto as bordas como margens e área de respiros tem que ser descontadas do tamanho total da coluna em questão para não estourar o tamanho da moldura que é de 770 pixels.
Agora com tudo acertado, o desafio era fazer com que as colunas laterais acompanhassem a variação de altura da coluna principal. Existem várias formas de fazer isso. Eu recorri ao bom e velho JavaScript como vocês podem ver no final do código.
Peguei as três colunas e coloquei em variáveis: obj_esq, obj_pri e obj_dir. Depois disso pego o tamanho da coluna principal usando uma propriedade chamada offsetHeight. Como ela retorna o valor interno da coluna considerando os valores de respiro e das bordas, retiro 22 pixels do valor para evitar que as colunas laterais, que irão receber este valor, fiquem maiores do que a coluna principal.
Depois da subtração correta, simplesmente configuro a altura da coluna da esquerda e da direita para a mesma altura que temos na variável altura_pri. Com isso ficamos com um layout homogêneo, leve e muito útil. Temos todo o ajuste de layout separado da estrutura do documento.
É claro que mesmo com os recursos aqui apresentados, para você chegar a um modelo completo que pode atender um grande site, ainda falta muita coisa, mas certamente é um bom começo.
Caso você tenha outras sugestões para a solução dada, me envie um e-mail para que eu possa analisar e possivelmente compartilhar aqui com todos os leitores.
Abraços, bom natal e até a próxima!
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title></title>
</head>
<style>
body {
text-align:center;
}
p {
margin:0 0 10px 0;
}
#moldura {
margin:0 auto 0 auto;
width:770px;
}
#col_esq, #col_dir {
width:98px;
}
#col_esq, #col_dir, #col_pri {
float:left;
text-align:left;
border:1px solid black;
padding:10px;
}
#col_esq {
background:#cccccc;
}
#col_dir {
background:#fedc67;
}
#col_pri {
width:488px;
margin:0 10px 0 10px;
}
</style>
<body>
<div id=”moldura”>
<div id=”col_esq”><b>coluna da esquerda</b></div>
<div id=”col_pri”><p><b>coluna principal</b></p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p><p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p><p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p><p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p></div>
<div id=”col_dir”><b>coluna da direita</b></div>
</div>
<script>
obj_esq = document.getElementById(’col_esq’);
obj_pri = document.getElementById(’col_pri’);
obj_dir = document.getElementById(’col_dir’);
altura_pri = parseInt(obj_pri.offsetHeight) - 22 + ‘px’;
obj_esq.style.height = obj_dir.style.height = altura_pri;
</script>
</body>
</html>
