Having an issue with clear fix not working with 960 grid system

StackOverflow https://stackoverflow.com/questions/8196640

Question

I was building a mockup with 960 Grid System and ran into an issue with .clearfix. I'm not a fan of having extra divs in my code to trigger clear and in ALL the documentation around .clearfix seems to presented as the solution. 960gs also comes with its own clearfix class so my expectation is that it should work. However when I apply the tag nothing happens. The clear class in an empty div works. While the clearfix class on the element I want to force a clear after fails. Given how much is out there about clearfix it must be something I'm overlooking.

Here is the source:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<style type="text/css">
    div > div
    {
        height:3em;
        background-color:Lime;
    }
</style>
</head>
<body>
<div class="container_12">
    <div class="grid_4 clearfix"></div>
    <div class="grid_4"></div>
</div>
</body>
</html>
Was it helpful?

Solution 2

I came back to this and want to explain what I found was the solution and what I learned from it.

So Clear fix will stop elements after the container that they are in from continuing to float. This is an interesting issue that arises from using float. However it is easy to confuse the symptom with the cause in this situation.

What you see are elements, divs, that are "floating" into one another when they should not because they are in separate containers. The assumption is that this is because you have not cleared the float. Furthermore there are many solutions to this problem that involve adding an element to the markup to "clear the float". This element usually has "clear:both" as a style and a period or "&nbsp"; as it's content. This looks like it fixes the problem, but ends up being a hack to solve another issue.

The real problem is that a container that has only elements that float, ends up not having any volume. If you have two containers, one after the other, with floats it looks like the float is not being cleared because both containers collapse and the layout is broke. The solution is, however, to add an overflow property to the containers. In my case it was "overflow:auto".

The "classic" clear fix solution dose this by adding an element that does not have float and a volume so that the container that holds everything does not collapse and maintains some form of volume. However it's a hack to address the real issue of setting an overflow property.

OTHER TIPS

You'll have to apply the clearfix class to the parent container for this to work.

<div class="container_12 clearfix">
    <div class="grid_4"></div>
    <div class="grid_4"></div>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top