Por vezes existe a necessidade de ter um website com uma barra lateral, ou simplesmente duas caixas lado a lado nas quais incluímos alguma informação. Existe a tentação, por grande parte dos webdesigners, de criar uma tabela para o efeito. Mas, tal como os standards sugerem, as tabelas devem ser usadas apenas para listar informação, e não para montar a estrutura do design.
Recorrendo a técnicas de CSS, consegue-se facilmente criar um estilo em que definindo algumas propriedades se conseguem os resultados desejados.
<html> <head> <title>Div's em paralelo</title> <style type="text/css"> #main { /* definir a largura total do "container" que vai albergar ambas as colunas */ width: 1000px; } #painelEsquerdo { background-color: SandyBrown; width: 500px; /* alinhar o painel à esquerda */ float: left; /* permite que os espaços à direita sejam ocupados por outros elementos */ clear: right; } #painelDireito { background-color: LightBlue; width: 500px; /* alinhar o painel à direita */ float: right; } </style> </head> <body> <div id="main"> <div id="painelEsquerdo"> <p><b>Este é o painel do lado esquerdo.</b></p> <p>Usando exclusivamente técnicas de CSS, podemos definir os nossos elementos para terem a apresentação correcta, facilitando a criação de websites e organizando a sua estrutura em ficheiros CSS.</p> </div> <div id="painelDireito"> <p><b>Este é o painel do lado direito.</b></p> <p>Estas técnicas de CSS permitem que o programador web consiga desenhar facilmente websites tableless, respeitando os standards web.</p> </div> </div> </body> </html>