Multiple Rows with Floated Images

Last Updated September 2018

You will need a clear float on a “block level” elements. This is an element that spans the entire width of the page, such as <div> or <hr> tags. See Drupal specific instructions. This is not always as easy as it looks. Let us know if we can help.

Desired Layout Example

Example Code with <div> tag:

<img src=”first_image.jpg” style=”float:left” alt=”description of image” />

<p>paragraph text that will float next to the image.</p>

<div style=”clear: both” >

<img src=”second_image.jpg” style=”float:left” alt=”description of image” />

<p>Paragraph and other text elements that will float next to the second image.</p>

</div>

Example Code with <hr /> tag:

<img src=”first_image.jpg” style=”float:left” alt=”description of image” />

<p>Paragraph and other text elements that will float next to the image.</p>

<hr style=”clear: both” />

<img src=”second_image.jpg” style=”float:left” alt=”description of image” />

<p>Paragraph text that will float next to the second image.</p>

Learn More

Dig deeper with CSS Tricks, All About Floats article.