How to correctly apply the .clearfix:after class to HTML?

Question

I'm currently trying (and failing) to get the .clearfix:after clearing fix that is detailed on stack here, and on position is everything here to work in Chrome and Firefox.

My understanding is that the .clearfix class should be added to the element which contains floats that need to be cleared. However, when I try that method I can't get the fix to work.

Can someone point out where I've messed up and how to correctly apply the .clearfix class?

Thanks in advance for the help!

Here is the relevant CSS:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.details_left{
width:400px;
float:left;
margin-right:35px;
}

.details_right{
width:400px;
float:left;
}

.problem, .faq{
min-height:500px;
background-color:white;
width:870px;
padding:15px 15px 15px 15px;
box-shadow: 0px -1px 3px #888;
-moz-box-shadow: 0px -1px 3px #888;
}

.cluster{
width:410px;
border-bottom: 1px solid #cccccc;
margin: 5px 10px 7px 10px;
}
.title{
color:#0066CC;
font-size:0.95em;
font-weight:bold;
}

.role{
color:#666666;
font-size:0.75em;
margin: 2px 0px 2px 0px;
}

.summary{
color:black;
font-size:0.9em;
font-weight:normal;
margin: 2px 0px 2px 0px;
}

.extras, .add_sub_bucket, .add{
color:#666666;
font-size:0.7em;
margin: 2px 0px 7px 0px;
}

And here is the HTML:

<div class="problem" class="clearfix">
        <div class="details_left">
            <div class="cluster">
                <a href="bMvRdr-mUOU" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
                <div class="role">Kenton Kivestu: Summer Consultant, BCG San Francisco</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View Kenton's blog posts</div>
            </div>

            <div class="cluster">
                <a href="#" id="rob" class="context" ><div class="title">On the importance of playing to company culture</div></a>
                <div class="role">Rob Reiling: Associate, McKinsey & Co., Minneapolis</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="jesse" class="context" ><div class="title">Remembering to be yourself in interviews</div></a>
                <div class="role">Jesse Lau: Consultant, Parthenon, San Francisco</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="richard" class="context" ><div class="title">The required confidence factor</div></a>
                <div class="role">Richard Smith: Consultant, Bain & Co., Boston</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="jessi" class="context" ><div class="title">Jessi talks about X factor</div></a>
                <div class="role">Jessi England: Consultant, Bain & Co., San Francisco</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="jessi" class="context" ><div class="title">Communicating clearly and cohesively</div></a>
                <div class="role">Amar Shibli: Consultant, McKinsey & Co., New York</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>
        </div>

        <div class="details_right" id="video_container">
            Hey there! Select an interview from the left! test
        </div>
    </div> <!-- closing problem div -->

score 0 · Accepted Answer · answered Jun 18 '11 at 16:23

0

Well, if your working code exactly resembles your example you haven't actually defined a .clearfix styling rule. That would be your first step. Also, detailing a little more on exactly what you're trying to accomplish would help as well.

Are you trying to make your div properly 'contain' the floating elements? Or do you need to make things around your floating elements properly line up in 'blocks'?

From your HTML snippet it seems to be the former. In that case simply adding a

.clearfix {
    overflow: auto;
}

to your stylesheet should work.

But, not knowing exactly what you're looking for, or what the HTML around this HTML looks like its hard to give a definitive answer.

answered Jun 18 '11 at 16:23

Charles Sprayberry

7,741
3
41
50

sorry, i accidentally left the clearfix:after class i was trying to use off the CSS here. I've added it now. Regarding what I'm trying to accomplish, I'd like the the div with class=problem to fully contain (by expanding as necessary) all the elements within it. – john k Jun 18 '11 at 16:36
Try adding `overflow: auto` to .clearfix. *take the :after off too* – Charles Sprayberry Jun 19 '11 at 02:19
I tried overflow:auto and removing the after and still no luck. Any other suggestions? – john k Jun 20 '11 at 21:46
Sorry john k, I didn't take a close enough look at your CSS and just blindly told you to go do something! Instead of trying to nit-pick your CSS I've just edited it up in a jfiddle. Can find it: http://jsfiddle.net/Bwq64/ – Charles Sprayberry Jun 21 '11 at 00:56
Charles - Thank you so much! This worked well and I appreciate you following up. Sorry that it took me so long to notice your revised answer. – john k Jul 11 '11 at 17:03

How to correctly apply the .clearfix:after class to HTML?

1 Answers1