Adding an Element to the End of the Container Div and Clearing it Using CSS Automatically

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don't take the course but that's primarily not the goal of this post.

We have already talked about adding an element manually to the end of the container div containing the floated element. And then we cleared that element. 

In this article we want to have CSS take care of adding the element for us. 

The concept is simple:

  • You add a class to any container containing a floated element. In this case, we have used the class name, "clearing" for example. You can choose any name you want.
  • Using the concept of generated content, you will have CSS add some content to the end of any element that has the class name you specified in the previous step. 
  • You'll clear the generated content in the previous step.

It's all done and the height of the containing element is going to be decided by the generated cleared content inside it. Since the floated element comes before the cleared element, the floated element is going to be inside the containing element automatically.

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<style>
img {
	float: left; 
	margin-right: 10px; 
}
div {
	background-color: #DBD9D9; 
	padding: 10px; 
	margin: 10px; 
	border: 1px solid black; 
	border-radius: 5px; 
}
.clearing:after {
	content: "."; 
	display: block; 
	visibility: hidden; 
	height: 0; 
	clear: both; 
}
</style>

</head>

<body>
	<div class="clearing">
		<p><img src="picture.png" width="200" height="250">It is a long established fact that a reader will be distracted by the readable content of
		a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
		using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
		Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
		evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div>
	<div class="clearing">
		<p><img src="picture.png" width="200" height="250">It is a long established fact that a reader will be distracted by the readable content of
		a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
		using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
		Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
		evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div>
	<div class="clearing">
		<p><img src="picture.png" width="200" height="250">It is a long established fact that a reader will be distracted by the readable content of
		a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
		using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
		Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
		evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div>
</body>

</html>

Here's how the class ".clearing" works here: 

  • The combination of ':after' and 'content: ".";' would cause a '.' to be added at the end of the div that has the class, ".clearing" but before the div ends. That is, all the divs that have a floated img inside them. 
  • You have to use "display: block" because a '.' is an inline element and cannot be cleared. Then you use "clear: both;" to clear the '.' that you created at the end of the div. 
  • "visibility: hidden;" would hide the '.' and so it cannot be seen on your website.

The following code block has been called the "clearfix hack" from Nicolas Gallaghar. It's make sure that your floats are cleared in all browsers: 

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

The clearfix hack from Nicolas Gallaghar is widely used for clearing floats. In any case, whatever you use to clear floats, you need to understand the possible implications and then use it.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the "float" CSS property. You can take this course with us at the following address: