Creating a Clear class to remove Float

Rate this item
(0 votes)

You have an image that is floating right. You want the next paragraph to go below the image, not next to it. Add this piece of CSS to your style sheet to create a "clear" class.

Hand draw business sketches Depositphotos 38239977 1920I work with RocketTheme websites every day. Their older templates had a built in "clear" class that I used on almost every page I built. I like having a photo floating on the page, but sometimes text needs to go under the picture, not next to it after the first paragraph or two. This could be the case where you have one sentence next to the photo, and the rest of the paragraph below. It just doesn't look nice or read easy. Add this code to your style sheet and simply create a "break" in your code with a small div tag. This code is from RocketTheme.

CSS:

html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    clear: both;
    display: block;
    float: none;
    font-size: 0;
    height: 0;
    list-style: outside none none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    visibility: hidden;
    width: 0;
}
 
Add this to your page where you want the break to lay:
 
<div class="clear"></div>
 
Ta-dah! Now everything looks better.
Read 6021 times Last modified on Friday, 25 August 2017 15:07
More in this category: « Forge of Empires Map