Clear Example

All 5 images on this page are floated left. This works... Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis. Aliquam consectetuer sem eu nibh. Proin eleifend ligula eu erat vestibulum hendrerit. Fusce gravida, lacus at fringilla tempor, nisl purus bibendum mauris, quis nonummy turpis libero eu tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed varius, sem faucibus porta aliquam, purus dolor pulvinar velit, vitae venenatis orci pede vitae pede. Vestibulum laoreet urna id lacus.

This works because the paragraph above is long...once the text flows around the floated element, it returns to the left edge and then the floated image and text in this paragraph flow as intended.

See...now this paragraph is where it belongs because I have added the class clearFloats to the DIV that holds the image. The clear property will clear out the float from the second paragraph so the third paragraph will return to the left edge of the window.

Code Used in this Example

<div class="clearFloats">
<img src="images/stylin_logo1.gif" width="150" height="80" alt="stylin logo" />
<p >See...now this paragraph is where it belongs because I have added the
<i>clearFloats</i> class to the DIV that holds the image.  
The <b>clear</b> property will clear out the float from the second 
paragraph so the third paragraph will return to
the left edge of the window.</p>
</div>