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.
