Article with Floated Images, Foundation

Section header

Boats waiting to be used.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Section header (cleared)

Waiting for warmer weather

Article w/Floated Images

The advantage of floating the image is, that you can have the paragraph(s) of text wrapping nicely around it.

The images are placed in a container named .flexible-article-container-left and .flexible-image-container-right respectively. These containers have necessary padding to keep the text at a suitable distance. They are the ones that need to be floated, and the text paragraph(s) have to be positioned inside the same container, here the .flexible-article-content.

You can add more images and text down the page, but one thing is important to remember: For each new 'section' the previous one has to be 'cleared' of the float. Here it is done at the section heading, starting at the second heading, (where it says 'cleared').

In this example, when at phone size viewports, the images are just positioned the usual way, so that they appear above the paragraphs. And the images, or the containers holding them, can of course be made larger.

Download this component