align / css / float / overflow / text

Alinha o texto próximo a um elemento flutuante

Às vezes, é necessário alinhar o texto próximo a um elemento flutuante, por exemplo, um elemento de imagem, sem o texto rodando abaixo do elemento flutuante. Além disso, o elemento flutuante pode ter uma largura variável ou dinâmica, o que torna o alinhamento do texto próximo a ele um pouco mais complicado.

Uma solução simples é usar a declaração CSS overflow: hidden;no elemento que precisa ser alinhado ao lado do elemento flutuante.

HTML

<img class="floated" alt="Floated image." />
<div class="aligned">Aligned division with text.</div>

CSS

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

div.aligned {
    overflow: hidden;
}

overflow: auto; parece funcionar também.

Verifique o snippet em jsfiddle.net