Nem todos sabem: Alinhamento mal feito

É muito comum visitar blogs ou sites que tem alguma imagem alinhada à direita ou esquerda e o conteúdo abaixo que deveria estar abaixo, estar ao lado, assim por exemplo:

Esse problema acontece porque o texto ao lado da imagem alinhada é muito pequeno, então o que vier depois vai acabar “subindo” e ficando ao lado da imagem também. Se usar um texto maior ao lado da imagem, não terá esse problema.


Então como resolver isso?
Simples! Basta adicionar um código abaixo do texto que foi colocado ao lado da imagem:

<div style="clear:both;"></div>

Ficando então assim:

<img src="imagem.jpg" alt="" align="left" class="alignleft" />Texto ao lado da imagem.
<div style="clear:both;"></div>
Conteúdo seguinte.

Também pode ser feito de outras duas formas, se preferir.

Usando CSS e código
Eu costumava usar isso, criar uma class no css e depois usar ela quando precisar. Mas me dei conta de que essa função não funciona no leitor de feeds. Então só irá funcionar para quem estiver visualizando seus posts na sua página. Mas quem quiser usar mesmo assim…

A class deve ser feita com essa configuração (trocando o primeiro both para o nome que você quiser):

.both {clear:both;}

E então ficará assim:

<img src="imagem.jpg" alt="" align="left" class="alignleft" />Texto ao lado da imagem.
<div class="both"></div>
Conteúdo seguinte.

Usando caracteres que geram espaço
Esse eu não uso, mas pode ser usado também. Basta adicionar abaixo do texto ao lado da imagem, repetindo ele quantas vezes for necessário para que o conteúdo seguinte não fique ao lado da imagem, mas sim abaixo:

&nbsp;

E então ficará assim:

<img src="imagem.jpg" alt="" align="left" class="alignleft" />Texto ao lado da imagem.
&nbsp;
&nbsp;
&nbsp;
Conteúdo seguinte.

No final, o resultado deverá ser assim:
Alinhamento sem problemas.

E por quê usei duas configurações de alinhamento na imagem?
Porque a configuração class=”alignleft” é apenas para quem estiver visualizando seus posts na sua página (e claro que deverá ter essa class no css configurada para alinhar à esquerda). Se a pessoa visualizar seu post em um leitor de feeds, ele não usa essa configuração e a imagem não ficará alinhada como você deixou quando fez o post. Então ao adicionar o align=”left” ele vai alinhar sem problemas em um leitor de feeds e não vai deixar seu texto bagunçado para quem estiver lendo.

Deixe seu comentário

13 comentários

  1. oi dani.
    legal este conteúdo para quem quer dicas de html e css… eu não uso nenhuma das tuas soluções, uso uma diferente. toda vez que eu uso o float, eu crio uma div por fora (como se fosse um box) com o clear both. então cada item fica dentro de um box com o clear both e não sobre. não é a mesma coisa que você usa, colocando a div abaixo, mas funciona com o mesmo princípio… =)

    beijos!

  2. Muito boa essa dica. Odeio quando acontece isso no layout ou no post, com imagens. estava aprendendo agora a utilizar o “clear:both”, mas fazia pelo css. Acho que vou mudar e fazer como voce ensina :) Obrigada pela explicação.