CSS flow justified text around an image

Question

tring to flow text around an image:

HTML

<div>
  <span id="photo"><img src="photo.png"</span>
  <span id="text">Lorem Ipsum, blah, blah, blah ...</span>
</div>

CSS

#photo {float:left;margin:0px 8px 5px 0px;}
#text {text-align:justify;}**

The text flows around the image, but it is not justified (alignment is left). If I float the text element left, then the alignment is correct (justified, as I want), but then the text does not flow around the image, rather it flows below the image - how can I fix this?

Answer 1

You need to either take the image out of the span, or float the span left.

Answer 2

The text-align property actually belongs on the enclosing block element not the inline element. So move it to the enclosing block:

div { text-align: justify; }

See 16.2 Alignment: the 'text-align' property of the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:

This property describes how inline content of a block is aligned. Values have the following meanings:

(emphasis added)