Usando as propriedades flutuantes CSS, você pode posicionar qualquer imagem à direita de qualquer texto, como pode ser visto com a imagem à direita deste texto. Para fazer isso na sua página, siga os passos abaixo.

Neste exemplo, estaremos usando um arquivo CSS externo. Usando um arquivo CSS externo, você pode criar uma imagem flutuante em qualquer página que inclua um link para o arquivo CSS. Os arquivos CSS externos também facilitam a alteração de qualquer configuração que você queira ajustar no futuro.

1. Crie um arquivo CSS. Se você já tiver um arquivo CSS para sua página da Web, edite seu arquivo CSS e adicione o seguinte código.

2. Adicione o seguinte código ao arquivo CSS.

 .floatRight {float: right; margin-left: 20px} 

Dica: Adicionar float: left faria a imagem flutuar no lado esquerdo do texto.

Se você quiser ter mais de uma imagem flutuando à direita, adicione também a seguinte linha ao arquivo CSS.

 .floatRightClear {float: right; claro: right; margin-left: 20px} 

3. Após o código acima ter sido criado, salve o arquivo CSS e chame-o de cada página HTML usando um código semelhante ao exemplo abaixo. Em nosso exemplo, nomeamos o arquivo CSS style.css.

4. Finalmente, adicione a qualquer imagem que você queira flutuar no lado direito do contêiner.