Where do I put my clearfix?

Question

Im having a problem with a collapsing margin and I dont know where to put the clearfix that it will actually work. Please can someone help?

<div class="calculator">    
            <img src="images/portfolio-4.png">
            <h3 class="titles">Calculator</h3>
            <p class="content">Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
        </div>
        <div class="contact" id="contact">
            <h3 class="alt-title">CONTACT</h3>
            <p class="contact-info">If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you.</p>
            <p class="telephone">Phone<a href="tel:+1(111)555-1234">+1 (111) 555-1234</a></p>
            <p class="email">Email<a href="mailto:email@yoursite.com">email@yoursite.com</a></p>
        </div>
    </div>
    <div class="footer">
        <p class="footer-name">Cheryl Casteling</p>
        <a href="#top" class="top">BACK TO TOP</a>
    </div>

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

 /* /////    MEDIA QUERIES   ////// */

@media (min-width: 768px) {
    .main-nav li a {
        display: inline-block;
        text-align: center;
        vertical-align: top;
        margin: 0 35px;
        padding-right: 0 20px;

    }

    .nav li {
        display: inline-block;
        text-align: center;
    }

    .profile-image,
    .intro {
        float: right;
        width: 45%;
        padding-right: 30px;
    }

    .intro {
        margin-left: -30px;
        padding-top: 80px;
    }
    .marketing,
    .search {
        float: left;
        width: 50%;
    }

    .travel,
    .map {
        float: left;
        width: 50%;
    }   

    .photo,
    .calculator {
        float: left;
        width: 50%;
    }
}

Answer 1 · 2016-02-23T09:17:37Z

February 23, 2016 9:17am

Not 100% sure exactly where the problem is that you're trying to fix.

After reconstructing your page from the html css above I can see that the #contact div isn't clearing the rest of the content in the .main-content div.

Quickest fix for that would be to force that div to clear by adding

.contact {
     display: block;
    width: 100%;
    clear: both;
}

Alternatively you could add another wrapper around all of the content except the #contact div in .main-content and add a clearfix to that, or move the #contact div outside of the .main-content div.

Answer 2 · 2016-02-22T21:20:11Z

February 22, 2016 9:20pm

It's a bit hard to get the full picture from the code snippets above but the clearfix is a class you assign to the parent container of floating items. If i have a div with the class "gallery" and i have 4 floating images in there, i will put the clearfix on the gallery. The clear fix basically dynamically inserts an additional element after the last child element and applies the css you specify. consider this:

Using a clearfix to automatically clear floats

<div class="gallery clearfix">
   <img class="float" src="#" />
   <img class="float" src="#" />
   <img class="float" src="#" />
   <img class="float" src="#" />
</div>

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

Vs manually clearing floats in html

<div class="gallery">
   <img class="float" src="#" />
   <img class="float" src="#" />
   <img class="float" src="#" />
   <img class="float" src="#" />
   <div style="clear:both;"></div>
</div>

Answer 3 · 2016-02-22T21:48:42Z

February 22, 2016 9:48pm

Hi Cheryl,

The parent container needs to clear. Use the following css in the media query.

.main-content:after {
                         content:" ";
                         display: table;
                         clear: both;
}

For more info on clearfix, just do a web search for clearfix .

Bob

Answer 4 · 2016-02-24T16:47:25Z

February 24, 2016 4:47pm

Cheryl,
Who did respond to with this answer? Did you try the following?

@media (min-width: 1024px) {
     .marketing, .search, .travel, .map, .photo, .calculator { 
          float: left; width: 33%; 
   }
     .main-content:after {
          content: " ";
          display: table;
          clear: both;
     }

}

Bob

Welcome to the Treehouse Community

Looking to learn something new?

Cheryl Oliver

Cheryl Oliver

Where do I put my clearfix?

Mark DeArmond

Mark DeArmond

Cheryl Oliver

Cheryl Oliver

Caleb Kleveter

Caleb Kleveter

4 Answers

Adam Hill

Adam Hill

Rich Turnbull

Rich Turnbull

Bob McCarty

Bob McCarty

Cheryl Oliver

Cheryl Oliver

Bob McCarty

Bob McCarty