Pesquisa no site
Itens ativos
Posts mais lidos hoje
Login do usuário
Assine o RSS do Drupal-BR
Dica para fazedores de temas: layout CSS de três colunas sem problemas com clear:both
Esta dica é para fazedores de temas. Quem tá acostumado a fazer temas usando CSS, sabe que existem algumas limitações ao fato de se criar as colunas laterais usando float: left/right.
Por exemplo, se eu aplicar um clear: both em um elemento (por exemplo, uma linha) numa coluna central, com duas colunas laterais, o layout será quebrado (Exemplo).
A solução é simples, mas requer que você mude um pouco a estrutura da página. Seu HTML ficará assim:
<body>
<div id="container">
<div id="topo" >
</div> <!-- /#topo -->
<div id="auxiliar1">
</div> <!-- /#auxiliar1 -->
<div id="auxiliar2">
</div> <!-- /#auxiliar2 -->
<div id="center">
<div id="conteudo">
</div> <!-- /#conteudo -->
</div> <!-- /#wrapper -->
<div id="rodape">
</div> <!-- rodape -->
</div> <!-- /#container -->
</body>
<div id="container">
<div id="topo" >
</div> <!-- /#topo -->
<div id="auxiliar1">
</div> <!-- /#auxiliar1 -->
<div id="auxiliar2">
</div> <!-- /#auxiliar2 -->
<div id="center">
<div id="conteudo">
</div> <!-- /#conteudo -->
</div> <!-- /#wrapper -->
<div id="rodape">
</div> <!-- rodape -->
</div> <!-- /#container -->
</body>
E o CSS, assim:
#auxiliar1 {
float: left;
width: 190px;
}
#auxiliar2 {
float: right;
width: 190px;
}
/* o codigo abaixo corrige um problema com os links nas colunas, nos IE 6 e 7 */
#auxiliar1,#auxiliar2 {
position: relative;
z-index: 2;
}
/* fim do codigo */
#center {
margin-left: -204px;
margin-right: -204px;
float: left;
width: 100%;
}
#conteudo {
margin-left: 204px;
margin-right: 204px;
}
float: left;
width: 190px;
}
#auxiliar2 {
float: right;
width: 190px;
}
/* o codigo abaixo corrige um problema com os links nas colunas, nos IE 6 e 7 */
#auxiliar1,#auxiliar2 {
position: relative;
z-index: 2;
}
/* fim do codigo */
#center {
margin-left: -204px;
margin-right: -204px;
float: left;
width: 100%;
}
#conteudo {
margin-left: 204px;
margin-right: 204px;
}
Exemplo prático aqui.
Para quem quiser uma descrição mais detalhada, pode consultar este tópico no meu blog.
Enviado por marcus_vbp em 26/08/2008 - 10:21
- Se logue ou se registre para poder enviar comentários
- 1261 leituras
