By setting the align attribute of the <img> tag it is possible to make the text flow around an image.
The align attribute can take the following options:
- left
- right
- middle
- top
- bottom
So if we take an image: <img src=”tree.jpg”/> and add align=”left” we have our image on the left hand side, with our text on multiple lines flowing around it.
<img src=”tree.jpg” align=”left” />Lorem ipsum dolor sit amet, conse …
Which realises as:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur, elit eget scelerisque vulputate, tortor sapien tincidunt enim, interdum suscipit lorem velit quis velit. Donec egestas diam a vehicula hendrerit. Nulla felis elit, luctus quis dui quis, elementum tincidunt neque. Sed consequat condimentum justo ac luctus. Nulla odio enim, mattis eget nunc nec, mollis cursus nunc. Fusce massa mi, ornare ut aliquet sed, convallis at metus. Duis dignissim, elit id tincidunt dapibus, lacus ex consequat eros, sed vehicula velit turpis sed massa. Suspendisse a consectetur dolor. Maecenas id imperdiet urna. Morbi volutpat malesuada massa. Ut eget libero non augue dignissim ullamcorper at vel tortor. Pellentesque condimentum in diam quis consectetur. Nullam eu diam ante. Proin ut ante in massa condimentum aliquet in non nulla. Quisque dignissim iaculis gravida.
The next paragraph is structured similarly but the image is right aligned.
<img src=”tree.jpg” align=”right” />Donec condimentum et nunc et feugiat. In in rutru…
Donec condimentum et nunc et feugiat. In in rutrum dolor. Phasellus dictum imperdiet arcu euismod vulputate. In at ante in lacus ullamcorper ullamcorper. Donec enim lorem, ultricies vel mi vitae, ullamcorper egestas libero. Aenean dolor leo, porttitor eu pellentesque non, dignissim vitae neque. Morbi accumsan nisl eleifend ante condimentum, sed tincidunt nibh imperdiet. Cras non faucibus metus. Sed iaculis turpis eget augue interdum, at tincidunt ipsum feugiat. Nulla facilisi. Suspendisse posuere bibendum nulla, non pharetra sem malesuada at. Phasellus tempus purus nunc, quis cursus elit consectetur vitae. Donec auctor turpis eu sem auctor maximus. Suspendisse placerat commodo leo eget semper. Ut vitae dui malesuada, feugiat leo vitae, vestibulum diam.
Two images can be placed side-by-side by with different alignments the text is shown in between.
<img src=”tree.jpg” align=”left” /><img src=”tree.jpg” align=”right” />Quisque cursus lorem at placerat malesuada. Sed sapien…
Quisque cursus lorem at placerat malesuada. Sed sapien lacus, tempus non vehicula non, placerat fermentum sem. Cras porttitor felis dolor, nec malesuada enim dictum id. Pellentesque ligula nulla, congue quis neque vel, convallis feugiat enim. Nunc eleifend porta augue. Pellentesque dapibus id leo at ornare. Phasellus viverra a tellus id consequat. Aliquam laoreet magna et leo placerat, ac pellentesque purus efficitur. Aenean porttitor est non vestibulum consectetur. Quisque id dignissim magna.
If the paragraph text is too short then the next paragraph, with its elements will continue from where the previous one stopped.
In the example below two paragraphs with left aligned images are merged together
Donec bibendum imperdiet fermentum. Sed bibendum turpis nec erat interdum consequat. Curabitur tortor dolor, viverra et rhoncus eu, ultricies non neque. Donec vel mollis est.
In vel magna fringilla, mattis velit nec, molestie leo. Ut consectetur commodo nisi, eget euismod urna lobortis in. Donec dignissim sodales tristique. Proin nec odio eu tellus dictum bibendum. Donec ornare quis quam nec ornare. Donec in dui eu nisi luctus congue. Proin iaculis eros mauris, sit amet aliquet eros congue in. Mauris odio ipsum, ornare a viverra ut, feugiat at tellus. Aliquam erat volutpat. Sed efficitur nec dui in ultrices. Vestibulum felis diam, maximus non imperdiet sed, bibendum in ante. Maecenas euismod varius neque, sed pellentesque leo vestibulum vitae. Vivamus id nisl eu nisl fermentum viverra. Curabitur dapibus quam mollis purus tristique fermentum.
The CMS websites include within their editors alignment icons which may be used to assign left and right alignment to images.
I prefer to position an image at the start of a paragraph. although this isn’t required, anywhere within the paragraph will do.
Once added click on the image and then click on the icon to align the image with respect to the paragraph.
The major issue with flowing text around an image is that it requires the adjacent text to be at least as high as the image. Different screen widths will have an effect too!
Only once the text has got beyond the height of the image can the next image and content be properly formatted.
To this end I prefer to put an image plus it’s text within its own column. This provides more control over the layout and helps govern the end result – removing some of the vagaries.
