Posts Tagged layout

Layout de 3 colunas com CSS

Postado por Danilo in CSS em 23 de junho de 2009

Hoje vou mostrar um exemplo prático e explicar como montar um layout de três colunas com css.

O layout fica semelhante a esse abaixo:

HTML

Primeiramente vamos fazer a estrutura do html.

Dentro da tag [body], vamos colocar uma div que vou definir com id=”site” que vai representar todo o conteudo do nosso layout.

Depois vamos acrescentar dentro dessa div#site uma div representando o topo div#topo, uma representando o conteudo div#conteudo (dentro dela vai as colunas) e mais uma pro rodape div#rodape.

Dentro da div#conteudo vamos acrescentar uma para o lado direito div#direita, uma para o meio div#meio, uma para o lado esquerdo div#esquerda, e depois uma div com um style clear: both; (pra fazer a div#conteudo descer até o final)

<html>
	<head>
		<title>Layout de 3 colunas</title>
		<link rel="stylesheet" type="text/css" href="estilo.css" />
	</head>
	<body>
		<div id="site">
			<div id="topo">div#topo</div>
			<div id="conteudo">
				<div id="esquerda">div#esquerda</div>
				<div id="meio">div#meio</div>
				<div id="direita">div#direita</div>
				<div style="clear: both;" />			
			</div>
			<div id="rodape">div#rodape</div>
		</div>
	</body>
</html>

CSS

*: vamos dar um “margin: 0 auto;” para a pagina toda (isso vai deixar a pagina centralizada).

body: vamos definir “background: #161616;” (um fundo para a pagina).

div#site: vamos definir 900px de largura e vamos dar uma margem no topo de 10px

div#topo: vamos definir 900px de largura, uma altura de 100px e colocar uma cor #444239.

div#conteudo: essa div vai segurar as três colunas, vamos deixar essa div com 900px de largura e colocar um background: #EE922E;

div#esquerda: vamos definir 150px de largura, deixar ela flutuando a esquerda dando um float: left e colocar uma cor #EE922E.

div#meio: vamos definir 600px de largura, deixar ela flutuando a esquerda dando um float: left (isso vai fazer ela colar do lado da div#esquerda formando a segunda coluna) e colocar uma cor #F8F3DF.

div#direita: vamos definir 150px de largura, deixar ela flutuando a esquerda dando um float: left (isso vai fazer ela colar do lado da div#meio formando a terceira coluna) e colocar uma cor #EE922E.

div#rodape: vamos definir 900px de largura, altura de 100px, dar um clear: both (isso vai fazer essa div descer abaixo das outras div de coluna) e colocar uma cor #59574C.

* { margin: 0 auto; }
body { background: #161616; }
div#site { width: 900px; margin-top: 10px;  }
div#topo { width: 900px; height: 100px; background: #444239; }
div#conteudo { width: 900px; background: #EE922E; }
div#esquerda { width: 150px; float: left; background: #EE922E; }	
div#meio { width: 600px; float: left; background: #F8F3DF; }
div#direita { width: 150px; float: right; background: #EE922E; }
div#rodape { width: 900px; height: 100px; background: #59574C; clear: both; }

, ,

11 Comentários