X
Back to the
Component Shop Read this first! Accordion Alert / Callout Another Lightbox Gallery Audio Player with Playlist Auto Sidebar Backbutton Basic Form Before/After Comparison Buttons Collapsible Alert Contact Form Count-down Script Crossfade Slider CSS Parallax Cut-out Text Decorative Background Details/Summary Classes Drilldown Menu Drop-down Easy Mega Menu Equal Height Columns Filtered Portfolio Flip-cards Glossary Table Hamburger Menu HTML Quiz Horizontal Tabs Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Magnifying Glass Masonry Grid Gallery Mega Menu Modal Optimal Image Sizes Oval Image PHP Includes Range Slider Read More Button Responsive Card Table Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Searchbox Simple Shapes Simple Cards Simple Slider Skill Bars Slide-in Nav Sticky Mega Menu Sticky Vertical Menu Subnav in Dropdowns Tabbed Gallery Tab Navigation Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Video Scroller Wrapping Text Years Completed Zebra Striped Table
☰

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.


 

TavernaAliquam 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.