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

Solving CSS Float’s Problem

Solving CSS Float’s Problem

  • Stumble it!
  • Share

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!


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Create Facebook App Style Slide-Out Navigation
  • Build Intelligent Layout Using CSS Calc() Property

  • Ben

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

    • Rick Hambrook

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

      • Ben

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

      • http://www.onlywebpro.com onlyWebPro

        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

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

  • Michael Shen

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

    • http://www.onlywebpro.com onlyWebPro

      Thanks for the suggestion! Thumbs up!

  • http://www.facebook.com/profile.php?id=1131086175 David Weller

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

  • KK

    You blog is good. Can we exchange links?

    • http://www.onlywebpro.com onlyWebPro

      Hi KK,

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

Android, iOS Development Tutorials