Divs em paralelo

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.

Código

<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>

Testado nos browsers IE8 e Firefox 3.5

É preciso sempre ter em atenção propriedades de CSS que ocupam espaço físico nos elementos DIV (por exemplo, margin, border, padding, …)

Wiki Portugal-a-Programar

Ferramentas de Site

Tabela de Conteúdos

Divs em paralelo

Código

Artigos relacionados

Ferramentas de Página