quarta-feira, 11 de março de 2009

Como dividir o texto em 2 colunas usando CSS


Tenho verificado em comentários de outros blogs que muitos perguntam como dividir um texto em duas colunas. O processo não é difícil, é só usar comandos div, como eu já tinha mencionado antes, quando estava dividindo o rodapé. Esse hack eu tinha visto primeiramente no Bloggerbuster tempos atrás, e desde então venho usando-o em vários widgets do meu blog.




Apesar de muitos já conhecerem essa técnica, sempre vai haver alguém perguntando sobre isso, e portanto, aqui vai a minha simples contribuição. Abaixo está um exemplo de um post dividido em duas colunas:




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac augue. Quisque quis turpis. Donec risus elit, lacinia a, viverra porta, adipiscing non, lorem. Donec placerat tristique felis. Aenean vulputate eros eget augue. Suspendisse pellentesque pretium eros. Quisque fringilla. Integer nisl elit, blandit vitae, lacinia ac, molestie ac, lectus. Etiam sodales tincidunt sapien. Sed convallis nunc sed elit. Sed ac lacus vitae ligula faucibus tempor. Pellentesque dignissim commodo lectus. Curabitur varius urna in lectus. Maecenas ac dui ut velit bibendum dapibus. Maecenas eu nisi. Cras elementum. Donec congue quam et dolor. Aliquam ipsum sapien, viverra quis, cursus ut, mollis vitae, tortor. Phasellus posuere laoreet est.
Duis sollicitudin varius nisl. Pellentesque vel elit quis leo elementum aliquet. Proin cursus sapien eget diam. Sed velit. Quisque ac nunc eu neque pharetra tempor. Fusce condimentum dignissim dolor. In turpis purus, imperdiet ut, lobortis bibendum, porttitor sit amet, quam. Aenean sed neque sit amet leo iaculis faucibus. Suspendisse feugiat. Suspendisse auctor tortor sollicitudin urna. Integer bibendum turpis id ipsum. Pellentesque sed libero. Nunc fringilla, nisi in pulvinar adipiscing, eros lacus lacinia lorem, ac sollicitudin lectus magna in arcu. Praesent pulvinar, sem nec scelerisque vestibulum, nunc tortor tincidunt massa, at ultrices lorem nisl non metus. Mauris feugiat odio in diam.



O código a ser usado é esse:
<div style="width: 45%; float: left;">COLOQUE AQUI O TEXTO
DA COLUNA À ESQUERDA</div>
<div style="width: 45%; float: right;">COLOQUE AQUI O TEXTO
DA COLUNA À DIREITA</div>
<div style="clear: both;"></div>
O último comando div com o estilo clear: both é para assegurar que uma coluna não deslize sobre a outra.
Vocês podem ver o uso desse hack no meu header, abaixo do banner, em duas situações: na primeira, fiz quatro colunas para conter a citações, data, hora e as bandeirinhas de tradução; na segunda com o adsense e o search do Google.
Abaixo das postagens, vem o posts recentes por categorias, que também foi dividido da mesma maneira. E no rodapé, onde há duas colunas. Como podem ver, é muito prático!

Como o template foi alterado (e muito!) não tenho mais esse hack, mas sempre que quero fazer colunas eu o uso, até mesmo com imagens no lugar do texto, desde que elas sejam do mesmo tamanho.

Um outro método é usar tabelas com o comando table, mas não recomendo. Atualmente deixa o carregamento da página muito lento, e muitos preferem aboli-lo, o uso das tabelas teve o seu tempo e foi muito útil, hoje em dia devemos seguir os Padrões Web, já ouviu falar do movimento Tableless na internet? Esteticamente o uso de CSS é muito mais padronizado e a maioria dos navegadores se entendem com essa linguagem(menos o IE em alguns casos... Ahhhh maldito IE!), creio eu!

Espero que essa dica tenha sido de grande ajuda!

17 comentários:

  1. Excelente tutorial. Super simples.

    ResponderExcluir
  2. òtimo para postar poesias =D tipicamente palavras depressivas =D

    ResponderExcluir
  3. Olá! Gostei dessa dica, mas gostaria de colocar mais pimenta nesse molho: é possível dividir o texto em, digamos, 4 colunas? E se sim, a alteração no código seria, em vez de 45%, 20% (já compensando as margens internas) e usando os códigos right, left, left, left?
    Agradeço o retorno. Valeu.

    ResponderExcluir
  4. Georges: Tenta 22%, quanto ao alinhamento, faça o método das tentativas :o) Tenta como você falou , ou deixa tudo em right ou left. Eu tive um trabalhão para alinhar 4 colunas quando no outro template eu tinha criado um widget de magazine.

    ResponderExcluir
  5. Cara muito show tava precisando para meu blog sobre licitações na área downloads precisava dividi-los

    ResponderExcluir
  6. e a proposito li o seu perfil "Sobre" e apesar de meu blog ser sobre licitações, amo o Rock n roll, heavy metal, metal, new metal...menos o corinthias hihihihihi, meu negocio é mengão, que ajudou o timão empatando com o flu srsrsrsr

    ResponderExcluir
  7. @Portal Licitar


    Valeu!!! Long Live Rock'n'Roll!!! :)

    Mas o Flamengo está mesmo indo de mal a pior, héin?...

    ResponderExcluir
  8. Muito obrigado! Era exatamente o que eu estava procurando.

    ResponderExcluir
  9. Muito obrigado. Era exatamente o que eu estava procurando.

    ResponderExcluir
  10. po cara bem legal esse tuto mais como funcionaria pra fazer isso dentro de um submenu?

    ResponderExcluir
  11. Um artigo simples, objetivo e inteligente.
    Era só isso que eu precisava, me ajudou muito.
    Obrigado.

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google