Posicionamento de DIVs para iniciantes

Trabalhar com desenvolvimento web nos padrões da W3C, tudo tableless, nem sempre é uma tarefa fácil. Usar tabelas para posicionar elementos nas páginas pode parecer mais fácil, mas se você ainda trabalha dessa maneira, já passou da hora de tentar mudar as coisas.

Esse post trará alguns exemplos de posicionamento de elementos na telas mais comuns. Usarei apenas CSS para conseguir o resultado final.

Centralizando uma div

O erro mais comum que as pessoas cometem é tentar centralizar uma div setando o align para center, ou coisas do tipo. Contudo a tarefa é bem mais simples: se você deseja que uma div ocupe o centro de sua página – ou seja, esteja no centro do seu eixo horizontal, basta manipular a propriedade margin. A propriedade define o tamanho da margem de uma div, por exemplo. Se  a sua intenção é centralizar essa div, logicamente, as suas margens da esquerda e direita serão iguais.

Seja qual for o tamanho de sua página ou div principal, ao setar margin:auto, você estará dizendo ao código html que “o mesmo espaço que existe à direita em sua div, deve existir na esquerda”. Portando, você tem um elemento centralizado.

<html>

<head>
<title>Posicionamento de DIVs</title>

<style type="text/css">

body {
color: purple;
background-color: #d8da3d; }

.box {
margin: auto;
color:navy;
background: white;
text-align: justify;
width: 450px;
}
</style>

</head>

<body>
<h1>Posicionamento de DIVs nas páginas</h1>
<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</div>
</body>

</html>

Pense agora em outra situação: você deseja que mais de uma div seja colocada ao centro –  ou ainda, deseja duas ou mais divs lado a lado, como em uma tabela. Para casos como esse devemos trabalhar com o atributo float. Esse atributo diz em que lado o elemento deverá flutuar – right ou left. Contudo devemos ter uma atenção especial sobre o float pois ele costuma ser um pouco imprevisível – principalmente se, ao colocar divs lado a lado você seta float:left para uma e float:right para outra. Para resolver esse problema trabalhamos com o float  e margin juntos.

posicionamento de divs para iniciantes

No exemplo acima, nossa div principal ainda está posicionada no centro da tela. Para adicionar essa div à esquerda, criei um novo estilo:

.boxfloat {
color:navy;
background: white;
text-align: justify;
width: 250px;
float:left;
}

Esse estilo foi aplicado em uma nova div, que deve ser colocada no código html ANTES da div principal – se você fizer o contrário, não funcionará!

Experimente criar também uma div à direita, utilizando float:right e posicionando-a DEPOIS da div principal.

É importante lembrar que, caso o tamanho somado de suas divs for superior ao tamanho de sua tela, os elementos com float irão “pular para a linha de baixo”, sendo alinhados conforme foi definido.

Para finalizar o post, deixo um exemplo mais real abaixo: O layout de um site, com menu à esquerda:

posicionamento-divs

<html>

<head>
<title>Posicionamento de DIVs</title>

<style type="text/css">

.tudo {
display: table;
}

.menu {
background:silver;
font-family:"Comic Sans MS";
float: left;
width: 30%;

}
.conteudo {
font-family:"Kristen ITC";
background:silver;
margin-left: 35%;
}

.logo{
margin: auto;
width:100%;
border:medium black dotted;
margin-bottom: 15px;
}

img{
margin: 10px;
}

</style>

</head>

<body>

<div class="tudo">
<div class="logo" align="center">
<img src="https://lh6.googleusercontent.com/-ara47sQKk_Y/TgiiJtmreDI/AAAAAAAAAMg/li8THS2MvxA/s288/logo.jpg" alt="logo" >
</div>
<div class="menu">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div class="conteudo">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then. </div>
</div>

</body>

</html>

 

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

4 Comentários

  • […] Para conseguir o resultado acima optei por não tratar o tamanho das imagens – se elas forem maiores do que a div permite, serão colocadas na próxima linha. Contudo, você pode personalizar o código como quiser. A classe do container é entao bem simples, só setei uma largura qualquer e centralizei com o atributo margin. […]

  • […] A não ser que seu dados sejam realmente tabeláveis, não utilize tables! Para a construção de templates e posicionamento de elemento trabalhe sempre com Divs! Se você tem alguma dúvida, consulte o artigo sobre posicionamento de Divs. […]

  • Responder novembro 17, 2011

    Verle

    Son of a gun, this is so hpelufl!

  • […] A não ser que seu dados sejam realmente “tabeláveis”, não utilize tables! Para a construção de templates e posicionamento de elemento trabalhe sempre com Divs e elementos semânticamente corretos! Se você tem alguma dúvida, consulte o artigo sobre posicionamento de Divs. […]

// Siga as boas práticas: Comente!