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 -->

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top