• home
• blog
• about
• resources
• portfolio
• contact

How to eliminate unnecessary tags by using CSS clear property

Published on April 1st 2009.

Update on March 23rd 2010.

The CSS clear property is used to clear floated block elements.

• clear:left will clear any elements floated to the left of your element
• clear:right will clear any element floated to the right of your element
• clear:both will clear elements floated both on the left and right of your element

Note: the item that you apply the clear property to does not need to be floated. But the item(s) you wish to clear, obviously, do.

An example of using clear:left

If you have a dynamically generated gallery containing thumbnails and you want to split them up into rows (for whatever purpose), you might resort to programming. With a server-side language you can use the mod operator (%) on your recordset to calculate where to open a div and where to close it, so the end result is seperate rows, containing however many images you specified. But there's an easier way to accomplish this, and it doesn't require creating rows of divs.

Introducing clear:left

The CSS clear:left property will clear anything that is floated left and comes before the cleared element in the code. So if you have a several elements floated to the left and you want to insert a break somewhere, all you need to do is place clear:left on the element that you want to be at the start of your new line. This will shift that element and everything after it onto a new line.

Remember, the element that you clear does not need to be floated.

CSS Example:

        
			img {
				float:left;
				margin:5px 5px 0 0;
				display:block;
			}
			.break {
				clear:left;
 			}          
        

HTML Example:

 
			<img src="image1.jpg" alt="Image 1" />
			<img src="image2.jpg" alt="Image 2" />
			<img src="image3.jpg" alt="Image 3" class="break" />
			<img src="image4.jpg" alt="Image 4" />
        

Result:

I have used four images for the purpose of this example, so you can see the clear, which has been placed on the third image, in action.

Something to keep in mind is - and may make this gallery example redundant - if your images span the whole width of your container, they will naturally break where appropriate. So you won't need to bother with clearing. The reason I have mentioned it is because there may be times when you won't want your images to fill their container horizontally. For these instances, cleat:left is a useful piece of CSS to know.

IE and clear:left

Internet Explorer 6 and 7 (not 8) do not render clear:left correctly. They will drop our cleared element onto a new line, but will shift the element beside the cleared element, onto the line above. This bug can be seen in the screenshot below.

Thanks, IE, that's really useful!

I devised a way to overcome this. I created a class called ie and gave it a float:none. This class, when applied to the image before our break, cancels the float on that image, shifting the image after our cleared element down to where it should be. In essence, it makes the clear behave as it should.

Here's our code from above, but including the IE fix: a class called .ie, which is applied to image 3 in the HTML Example.

CSS Example:

            img {
                float:left;
                margin:5px 5px 0 0;
                display:block;
            }
            .break {
                clear:left;
            }
            .ie {
                float:none !Important;
                padding-top:5px;
            }
        

The !important is there to override the float on the img tag. For more on how to use !Important visit my tutorial How to override styles and use of !important.

HTML Example:

			<img src="image1.jpg" alt="Image 1" />
			<img src="image2.jpg" alt="Image 2" class="ie" />
			<img src="image3.jpg" alt="Image 3" class="break" />
			<img src="image4.jpg" alt="Image 4" />       
        

All you need to do is place the .ie class on the element that comes before your cleared element, and it will make IE behave!

You may have noticed I also added a padding of 5px to the ie class. This was because the float:none does away with the margins added to our images. The only may to get that back, so as the ie image didn't look skewered, was to add a padding to its top with the same value as the margin-top on the other images.

The IE fix in action

How would we have accomplished this?

We would have accomplished this by breaking the images off into separate rows of divs. If your images aren't the same height, you're better off doing it this way, otherwise your images will look rather odd, as they won't be aligned straight.

An example of using clear:right

Suppose you want to include a couple of images in the text on your website. But here's the catch: you want both images to be floated right and to be positioned one underneath the other. You could accomplish this by placing the images in a container and then floating the container right. But there is an easier way.

Introducing clear:right

The CSS clear:right property will clear anything that is floated right and comes before the cleared element in the code.

Remember, the element that you clear does not need to be floated.

CSS Example:

 		
			img {
            	loat:right;
            }
            .clear {
            	clear:right;
            }      
 		

HTML Example:

        
			<img src="imageone.jpg" alt="Image One" />
			<img src="imagetwo.jpg" class="clear" alt="Image Two" />
            <p>Your text...</p>
 		

We apply a float:right to both images, and then clerar:right to the image we want to go underneath. This floats our images to the right of our text, stacking them one underneath the other. First, let's look at how not to do it.

The wrong way:

It is important to note that anything you want to clear must come before your cleared element, in the code, otherwise the outcome will be as follows:

In this example, clear:right is on the image which comes first in the code (which is hard to see, but is the image to the right), because you may think this will clear anything floated after it. But this is not how it works. clear:right will only clear right floating elements that come before the element that is to be cleared.

The right way:

The right way is to add clear:right to the bottom image (image of the woman, Jill Valentine - yes, I know, she looks good as a blonde!).

How would we have accomplished this?

We would have accomplished this by wrapping the two images in a container div, which would be floated to the right. But, as you can see, clearing the float is a more conveniant way of accomplishing the same thing.

It would, however, still be neccessary to use a container if you wished to add captions to your images.

An example of using clear:both

clear:right and clear:left have limitations. Namely, they will only act on floated items of the same direction. For instance, clear:right will only clear items with a float:right applied to them; clear:left will only clear items with float:left applied to them.

There are no such limitations with clear:both. It will clear both sides, regardless of the floats surrounding it.

Onto an example...

Suppose you have a simple layout with main content, and navigation. The main content is floated to the left, and the navigation is floated to the right, because you always want it to but up against the right-hand side of your screen. You want your footer to sit underneath the main content and navigation, but you cannot clear the right side of the navigation, because the footer is not floated right, and, most importantly, does not come before the navigation in the code. So what do we do? We apply clear:both to the footer.

Introducing clear:both

The CSS clear:both property will clear anything that comes before and after an element.

Remember, the element that you clear does not need to be floated.

Let's look at a working example of our simple layout mentioned above.

CSS Example:

        
        	#main {
            	width:70%;
            	float:left;
            	margin-bottom:10px;
            }
            #nav {
            	width:20%;
            	float:right;
            	text-align:right;
            }
            #footer {
            	clear:both;
            }
        

HTMl Example:

		
        	<div id="main"></div>
			<ul id="nav">
            <li>Item One</li>
            <li>Item Two</li>
            <li>item Three</>
            </ul>
			<div id="footer"></div>
 		

Result:

How would we have accomplished this?

Without the clear both, we would have accomplished this by placing the main content and navigation into a container div, and then placing our footer underneath this.