Home » Tutorials » HTML & CSS » Solving CSS Float’s Problem

Solving CSS Float’s Problem

Solving CSS Float’s Problem

As a web designer, we always see a problem happened when a floated element is within a container div, the floated element doesn’t automatically increase the height of the container. The main reason causing this problem is the container doesn’t contains the floated element anymore, when the element is floated.

Still not understand what I’m talking about? No worries, let’s take a look on the picture below:

Float Problem
This is one of the common problem happened when using css float.

The Solution To Fix CSS Float’s Problem

Ok, here is the technique that we used to solve the problem that caused by CSS float:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solving CSS Float's Problem</title>
<style type="text/css">
.parent {
	background: #FC0;	
}
.right {
	float: right;	
}
.left {
	float: left;	
}

.clearfix:before,
.clearfix:after {
content: " ";
display: block;
}
.clearfix:after {
clear: both;
}
</style>
</head>

<body>
<div class="parent clearfix">
	<div class="right">Right Element</div>
    <div class="left">Left Element</div>
</div>
</body>
</html>

As you can see the :before and :after pseudo-elements has been used to address the problem. These pseudo-elements does exactly what the word implies. It creates a phoney element and inserts it before and after the content of the element that we’ve specified.

In this case, we insert a blank space before and after the parent div; and clear any float elements at the end of parent div.

Pretty simple right? Share this if you found this information helpful.

*Update

We need extra declaration to fix the CSS float’s problem in IE6 & IE7:

.clearfix{ *zoom:1; }

*Thank you for this tips Michael Shen!


10 Comments

  1. Ben 03/07/2013 at 10:08 am

    An easier way to achieve the same thing is to add overflow: hidden to the parent.

    • Rick Hambrook 03/07/2013 at 10:28 am

      overflow:hidden doesn’t work on some IE versions.

      • Ben 03/07/2013 at 12:11 pm

        Some versions being IE6 and 7. Do they support the :after and :before selectors though?

      • onlyWebPro 03/07/2013 at 12:53 pm

        Yeah. Actually there are alot of methods to fix the float problem, and every method has PROS & CONS, there is no perfect solution out there, just choose the one you think is more useful and easier for you to implement it into your design. 🙂

      • AlessandroPellizzari 03/07/2013 at 1:31 pm

        The same versions that don’t understand :before and :after. 🙂

  2. Michael Shen 03/07/2013 at 1:44 pm

    It is the common way to solve this problem .But i think should add “.clearfix{*zoom:1; /* for IE6 IE7 */}” in the end

    • onlyWebPro 03/07/2013 at 3:43 pm

      Thanks for the suggestion! Thumbs up!

  3. David Weller 03/08/2013 at 4:11 am

    float left. float right. clear empty div below: no need for pseudo elements

  4. KK 03/27/2013 at 2:18 am

    You blog is good. Can we exchange links?

    • onlyWebPro 03/27/2013 at 12:51 pm

      Hi KK,

      Would you mind to disclose the details of your website before we go for further discussion?

Leave a Comment

Android, iOS Development Tutorials