Layout CSS: Como criar um Layout de duas colunas com HTML

Ol� pessoal, nesse artigo vamos aprender como criar um layout simples com 2 colunas usando o conceito de tableless, por meio de div�s e CSS, mas antes de começarmos, vamos entender um pouco do que se trata cada uma.

Tableless: � o novo padr�o utilizado para criaç�o de sites, onde n�o usamos tabelas na estruturaç�o do layout.
Div: � uma tag utilizada para definir seç�es no c�digo html e consequentemente na p�gina web.
CSS: Cascading Style Sheets � uma linguagem de estilo utilizada para definir a apresentaç�o de documentos escritos em uma linguagem de marcaç�o, como HTML ou XML.

Saiba mais: Curso de HTML5

Agora que j� sabemos um pouco o que s�o cada uma dessas coisas, vamos ao c�digo.

Nota: Usaremos cores no fundo das div�s apenas para aprendizado e visualizaç�o dos blocos de conte�do do layout. Caso n�o goste das cores, � s� modificar na propriedade background :)

Criando um novo documento

Crie um documento html em branco, pode ser no bloco de notas ou em qualquer outro editor html, nesse exemplo vamos utilizar o Adobe Dreamweaver CS5, como mostra a imagem a seguir:

Figura 1. Adobe Dreamweaver CS5

Nota: Muitas pessoas deixaram de usar o dreamweaver, principalmente pela quantidade de c�digo sujo que ele gera, como o doctype, etc. Eu particularmente gosto muito de us�-lo no modo code, mais por costume do que qualquer outra coisa, mas caso queiram conferir outra IDE, eu sugiro o Notepad++ e o Sublime Text 2.

Assim que abrir o documento o c�digo que dever� aparecer � assim :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Linha de C�digo - Tutorial</title>
</head>

<body>
</body>
</html>

Listagem 1. C�digo html ao abrir o documento

Iremos salvar esse arquivo com o nome de index.html.

Criaç�o da p�gina

Para a criaç�o da nossa p�gina, al�m do documento html, vamos precisar criar um documento CSS tamb�m, como mostra a imagem a seguir:

Figura 2. Criando documento CSS

Nosso arquivo .css ficar� em branco por enquanto e a princ�pio iremos salvar ele com o nome de estilos.css, mas voc� pode salvar com o nome que voc� quiser.

Vamos começar a montar nossa p�gina, a primeira coisa a fazermos � linkar o nosso arquivo css � nossa p�gina html, para isso precisamos digitar o seguinte c�digo dentro da tag :


<link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />

Listagem 2. Linkando arquivo css

Com isso nossos dois arquivos estar�o linkados e poderemos começar a desenvolver nossa p�gina.

Desenvolvimento da p�gina

Vamos começar pelas div�s que iremos utilizar, primeiro criamos uma div geral, para definirmos o tamanho em que o site ir� ocupar na tela, chamaremos ela de �site�:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 colunas</title>
<link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />

</head>

<body>
<div id="site">

</div>
</body>
</html>

Listagem 3. Criando a primeira div

Ap�s isso, no nosso arquivo estilos.css iremos estilizar esse div que acabamos de criar, no c�digo irei colocando coment�rios para ir explicando o que cada linha faz:


#site{
  /* Definimos a largura da p�gina */
  width:1000px;
  /* Definirmos a altura da p�gina*/
  height:700px;
  /* Aqui definiremos a posiç�o que a p�gina ocupar� na tela, nesse caso estamos definindo que fique centralizado na tela*/
  /*top : posiç�o de cima */
  margin-top:0;
  /* left: posiç�o de esquerda*/
  margin-left:auto;
  /* bottom : posiç�o de baixo */
  margin-bottom:0;
  /* right : posiç�o de direita */
  margin-right:auto;
  /* Aqui definiremos a cor de fundo da p�gina */
  background-color:#666;
}

Listagem 4. Colocando os primeiros c�digos no arquivo estilo.css

Ap�s definirmos a div principal do nosso site, a p�gina ficar� dessa forma:

Figura 3. Div Principal

Ap�s isso, vamos definir os espaços principais da p�gina, que � o cabeçalho(header), conte�do e rodap�(footer).

O c�digo ficar� dessa forma:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 colunas</title>
<link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />

</head>

<body>
<div id="site">

<div id="header"></div>
<div id="conteudo">

</div>
<div id="footer"></div>

</div>
</body>
</html>

Listagem 5. Inserindo divs para cabeçalho e rodap�

Estilizando a p�gina

Ap�s a criaç�o do html, vamos estiliza-lo no arquivo estilos.css, adicionaremos o seguinte c�digo:


#header{
  /*Novamente definimos a largura da div*/
  width:1000px;
  /* altura da div */
  height:100px;
  /* Cor de fundo da div */
  background-color:#00F;
  }
#conteudo{
  /*Novamente definimos a largura da div*/
  width:1000px;
  /* altura da div */
  height:500px;
  /* Cor de fundo da div */
  background-color:#0F0;  
} 
#footer{
  /*Novamente definimos a largura da div*/
  width:1000px;
  /* altura da div */
  height:100px;
  /* Cor de fundo da div */
  background-color:#C3C;
  }

Listagem 6. Estilizando cabeçalho e rodap�

Com essas modificaç�es, nossa p�gina dever� ficar como mostra a imagem a seguir:

Figura 4. P�gina modificada

Montando a p�gina

Agora que j� montamos a estrutura da nossa p�gina, a �nica coisa que falta � criarmos duas colunas na div conte�do.

Iremos abrir novamente nosso arquivo index.html e dentro da div conte�do iremos adicionar mais duas div�s, como mostra o c�digo a seguir:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 colunas</title>
<link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />

</head>

<body>
<div id="site">

<div id="header"></div>

<div id="conteudo"><!-- abrimos a div conteudo -->

<div id="conteudo-left"></div>
<div id="conteudo-right"></div>

</div><!-- aqui fechamos a div conteudo -->

<div id="footer"></div>

</div>
</body>
</html>

Listagem 7. Separando a div de conte�do em duas colunas

Ap�s isso, como j� sabemos temos que estilizar o nosso arquivo estilos.css da seguinte forma:


#conteudo-left{
  /*Novamente definimos a largura da div*/
  width:500px;
  /* altura da div */
  height:300px;
  /* O atributo Float � utilizado para fazermos o nosso bloco(div) 
  literalmente flutue e se posicione onde queremos na p�gina, 
  quando escolhemos left, dizemos que esse bloco ir� se posicionar na 
  parte esquerda da p�gina */
  float:left;
  /* Cor de fundo da div */
  background-color:#FF0;
  }
#conteudo-right{
  /*Novamente definimos a largura da div*/
  width:500px;
  /* altura da div */
  height:400px;
  /* Pode parecer meio estranho usarmos o mesmo atributo left para o bloco 
  em que queremos posicionar na direita, mas como sabemos, o CSS � um estilo 
  em cascata, nossa div conte�do definimos a largura de 1000px e na 
  conteudo-left 500px, automaticamente ao definirmos o conteudo-right 
  com 500px e � esquerda tamb�m, ele ficou � direita do conteudo-left, 
  pois o m�ximo que a div filha poder� ter � 1000px, sendo 500+500=1000px */
  float:left;
  /* Cor de fundo da div */
  background-color:#F00;
  }

Listagem 8. Adicionando estilo nas colunas de conte�do

Ap�s essa atualizaç�o, nossa p�gina dever� ser exibida como mostra a imagem a seguir:

Figura 5. P�gina atualizada

Espero que tenham gostado e entendido um pouco de como funciona a estruturaç�o do layout usando a t�cnica tableless com xhtml e CSS na criaç�o de um layout simples com duas colunas.

Links �teis

Cursos de Java: Torne-se um programador Java completo. Aqui voc� encontra cursos sobre as mais ferramentas e frameworks do universo Java. Aprenda a desenvolver sites e web services com JSF, Jersey, Hibernate e mais.
ASP.NET Web API: Criando um web service com v�rias entidades: Neste exemplo veremos como desenvolver um web service RESTful com ASP.NET Web API que contar� com as funç�es de CRUD com relacionamento 1:N. Al�m disso poderemos tamb�m efetuar filtros e ordenaç�o com OData.
Curso de Yarn: Neste curso aprenderemos o que � o Yarn: um gerenciador de depend�ncias concorrente do NPM que promete ser mais r�pido e eficiente que este. Por meio do Yarn � poss�vel instalar os mesmos pacotes do NPM e do Bower, de forma r�pida e inclusive offline.

Saiba mais sobre HTML e CSS ;)

Curso de CSS Gratuito: Neste curso de CSS conheça como importar e incorpor�-lo no HTML. Al�m disso voc� aprender� a escrever seus primeiros c�digos e conhecer as principais propriedades e atributos. Aprenda tamb�m a inserir efeitos em blocos de texto, como por exemplo a capitular, atrav�s dos pseudo-elementos.
Curso de Programaç�o para iniciantes: Esta s�rie traz guias e cursos de programaç�o que direcionar� seus estudos e ajudar� a escolher a melhor �rea de atuaç�o. Voc� aprender� os primeiros passos em diversas tecnologias nas �reas Front-end, .NET, Banco de dados e muito mais.
Cursos de HTML, CSS, JavaScript, jQuery, Bootstrap, Angular e muito mais.: Confira os cursos que a DevMedia preparou para voc� se tornar um programador web front-end completo. Aqui voc� aprende HTML, CSS, JavaScript, jQuery, Bootstrap, Angular e muito mais. Confira!

Como criar um Layout de duas colunas com HTML e CSS

Veja neste artigo como montar um layout de duas colunas dentro dos padrões de tableless. Serão utilizadas técnicas de HTML e CSS para estilização das divs (blocos de conteúdo).