Wrapping Text and Floated Images

Minaret Pictures from a village in Turkey. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut ante quis tellus maximus euismod et vel justo. Proin tristique, nunc ac condimentum facilisis, purus nulla auctor orci, in dapibus nunc risus et magna. Ut vehicula neque vel felis ultricies pulvinar. Fusce eu varius mi, nec sagittis urna. Duis quis iaculis sapien. Nulla commodo nec urna sed rutrum. Donec et nisi ac sapien tincidunt bibendum eget et ante. Phasellus pulvinar, massa vitae blandit congue, lacus nibh cursus metus, et aliquam augue lorem ac risus. Nam eleifend magna nunc, et semper mauris sagittis at. Aenean sem nisi, vestibulum sagittis arcu eu, viverra tempor purus. Suspendisse aliquam tempus venenatis.

Taverna Aliquam tempus suscipit lectus, id blandit sem placerat a. In orci sem, auctor euismod nunc ut, consectetur pellentesque urna. Sed tempus aliquam felis, eget efficitur nulla consectetur sed. Sed luctus, tellus vel ultrices iaculis, felis mi venenatis metus, a ultricies augue lacus in eros. Morbi porttitor faucibus vehicula. Ut commodo, neque lacinia pretium tincidunt, risus eros placerat lectus, sit amet posuere tortor augue sit amet urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt ex non nisl euismod mollis. Curabitur sollicitudin volutpat consequat. Aenean rhoncus, magna quis consectetur fermentum, eros diam dapibus quam, nec gravida sem eros hendrerit orci. Maecenas dictum eget quam eget interdum. Sed tincidunt nisl id erat convallis elementum. Fusce dignissim gravida lorem, eu finibus nisi sodales ac. Suspendisse sodales rhoncus porta. Ut ac sodales augue, at porttitor felis. Praesent et mauris vitae dolor dictum iaculis quis in quam.

The trick to make text wrap nicely around images is popping the images into the same div, or even into the same paragraph, and then float them left or right. And of course give the images a bit of margin to keep the text at a suitable distance. There is another trick, which was not necessary here, though. Say you would have wanted to have the second paragraph start below the first image, then you would have had to add a 'clearfix' between the two paragraphs. In fact, the zipped file has a clearfix inserted there, but as a comment, and if you 'uncomment' it and refresh the page, you will see what happens.

Download the component.