I recently received a web mockup that included a sidebar with a short paragraph of narrow text; a quote from a person. At the end of the quote, the mockup had a circular portrait of the person floated to the right, hanging off the edge of the block, with the text flowing around the edge of it.
It looked like this, where "TEXT" is the text, and "o" is the portrait
TEXTTEXTTEXTTEXTTEX TEXTTEXTTEXTTE TEXTTEXTTEXT ooooo TEXTTEXTTEXT ooooooo TEXTTEXTTEXT ooooooo ooooo
The easiest way to do this would be to put the tag for the portrait somewhere in the markup of the text, and float it right. But the HTML will look like, in that case:
TEXTTEXTTE<img src="..." style="float: right;">XTTEXTTEXT and I fear this would be bad for SEO.
Does anyone know? The other option is putting the at the end, absolutely positioning it, and using manual line breaks -- which sucks for my responsive design.