Como alinhar conteúdo, coluna esquerda e direita com css

alinhar conteudo-coluna esquerda e direita-passo2-concluidoNeste artigo vou mostrar um truque que aprendi para alinhar conteúdo, coluna esquerda e direita da página. No script o conteúdo vem em primeiro, depois a coluna esquerda e depois a direita. Fiz isso para facilitar o compartilhamento do conteúdo nas redes sociais e o trabalho com alguns programas afiliados como o Google Adsense, por exemplo. No qual interpretam a página assim como aparecem no script e não como na posição visual dos elementos.

Por que no script coloquei o conteúdo em primeiro?

Bem, quando compartilhamos uma página no Facebook ou noutra rede social, o sistema da rede interpreta a página compartilhada assim como ela vem no script. Por isso, prefiro deixar no script o conteúdo da página em primeiro lugar e depois as respectivas colunas, com isso o conteúdo das colunas não vão interferir no conteúdo compartilhado. O mesmo acontece com programas afiliados como o Google Adsense, por exemplo. Mas como fazer para deixar o conteúdo da página centralizada e as colunas na esquerda e na direita? Veja o truque que aprendi no tutorial abaixo:

Tutorial: Como alinhar conteúdo, coluna esquerda e direita com css

Vamos então criar os nossos conteúdos para depois alinharmos com o css.

Na ordem do script os elementos estão assim:

alinhar conteudo-coluna esquerda e direita-passo1

Agora vamos partir para o csss. Fiz o css na própria página, mas o ideal é fazer em um arquivo separado e linka-lo na pagina (exe: <link rel="stylesheet" type="text/css" href="estilo.css">

).

Resultado depois de aplicado o css:

alinhar conteudo-coluna esquerda e direita-passo2-concluido

Entendendo o código

Bem, o que fiz foi bem simples:

  1. Primeiro criei os elementos (conteúdo e as colunas).
  2. Depois, no css, fiz com que o conteúdo flutuasse à esquerda. As colunas vão então tentar ficar à direita do conteúdo;
  3. Depois, fiz a coluna direita flutuar à direita, o que vai determinar a sua posição;
  4. Agora o segredo está na coluna esquerda. Para fazer ela ir para a sua posição correta, utilizei o “position:absolute”. Isso faz com que ela fique na sua posição absoluta, ou seja, no início do elemento onde ela está contida, ignorando a posição dos outros elementos.
  5. Daí agora é só afastar o conteúdo à esquerda para que ele não fique atrás da coluna esquerda. Para isso é só utilizar “margin-left: xxx”, onde o xxx e a largura em pixels da coluna esquerda + uns 10px de espaçamento.
  6. Pronto, feito isso tudo ficou em seus devidos lugares!

Se você ficou alguma dúvida ou você tem algumas outras soluções para esse tipo de trabalho deixe seu comentário abaixo.

Se gostou, clique em curtir e compartilhe!

One Comment

Deixe seu COMENTÁRIO

O seu endereço de e-mail não será publicado.

CommentLuv badge

Email
Print