Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kenny Parewijck
Kenny Parewijck
4,602 Points

Clearfix problem

Hello everybody

I am having troubles with the implementation of the clear fix hack into my code. In CSS I created the clear fix:

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

And in the html I added my class to my parent element from the two floating columns:

<div class="hero-wrapper">
      <div class="logo-topnav group">
        <a href="index.html">
          <div class="logo">
          </div>
        </a>
        <nav class="topnav">
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Onze koffies</a></li>
            <li><a href="#">Help</a></li>
          </ul>
        </nav>
      </div>
      <div class="header-two">
        <h1>Ontdek koffie zoals nooit tevoren</h1>
        <p>
          Betere, excusieve koffie makkelijk thuisgeleverd wanneer jij het wil
        </p>
        <div class="cta"> <!-- bevat de cta's -->
          <a href="#" class="button">Starten met Coffee-heart</a>
          <a href="#" class="btnreverse">Meer weten</a>
        </div>
      </div>
    </div>

I will add my full html and css under here:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <div class="hero-wrapper">
      <div class="logo-topnav group"> 
        <a href="index.html">
          <div class="logo">
          </div>
        </a>
        <nav class="topnav">
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Onze koffies</a></li>
            <li><a href="#">Help</a></li>
          </ul>
        </nav>
      </div>
      <div class="header-two"> 
        <h1>Ontdek koffie zoals nooit tevoren</h1>
        <p>
          Betere, excusieve koffie makkelijk thuisgeleverd wanneer jij het wil
        </p>
        <div class="cta"> <!-- bevat de cta's -->
          <a href="#" class="button">Starten met Coffee-heart</a>
          <a href="#" class="btnreverse">Meer weten</a>
        </div>
      </div>
    </div>
  </body>
</html>
/******************** CLEARFIX ********************/

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

/******************** ALGEMENE STYLES ********************/

*, h1,h2,p,a,img,div {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  line-height: 1.5;
}

h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.2em;
  text-transform: uppercase;
  line-height: 1.24;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.2em;
  font-style: normal;
  line-height: 1.5;
}

a:link {
  color: white;
  text-decoration: none;
  font-weight: normal;
}

a:visited {
  color: white;
}

a:hover {
  /*color: rgba(255, 255, 255, 0.9);*/
}

a:active {
  color: darkgoldenrod;
}

a:focus {
 color: darkgoldenrod;
}

ul,ol,li {
  padding: 0;
  margin: 0;
  border: 0;
}

/****************************** HEADER ******************************/

/* volledige header wrapper */
.hero-wrapper {
  padding: 15px;
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.7)),url(../images/hero_one.jpg) black no-repeat center;
  background-size: cover;
  color: white;
  border: 1px solid green;
}
/*****/

/* homebutton-logo */
.logo {
  height: 40px;
  width: 120px;
  border: 1px solid green;
  background: url(../images/logo.png) no-repeat center;
  background-size: cover;
  float:left;
}

.logo:hover {
  background: url(../images/logo_10%_opacity.png) no-repeat center;
  background-size: cover;
}
/*****/


.topnav ul li {
  display: inline-block;
  border: 1px solid green;
}

.topnav {
  border: 1px solid green;
  float: right;
}

.logo-topnav {
  border: 1px solid green;
}

h1 {
  border: 1px solid green;
}

/*************** DRY CSS ***************/

.button:link, .button:visited {
  padding: 0.7em 1em;
  margin: 10px;
  letter-spacing: 0.0197em;
  font-weight: bold;
  background-color: darkgoldenrod;
  border: none;
  border-radius: 4px;
  text-align: center;
  color: white;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;

}

.button:hover {
  background-color: rgb(191, 146, 37);
}

.btnreverse:link, .btnreverse:visited {
  padding: 0.7em 1em;
  margin: 10px;
  letter-spacing: 0.0197em;
  font-weight: bold;
  background-color: transperant;
  border: 1px solid darkgoldenrod;
  border-radius: 4px;
  text-align: center;
  color: white;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

.btnreverse:hover {
  background-color: rgba(255, 255, 255, 0.6);;
  border: 1px solid darkgoldenrod;
}

Question:

Could anyone help me with this? I have no clue why the clear fix won't work here..

Thanks!

I just put this into an html document and loaded into Chrome and it seems to be working.. which items are not clearing on your side? Which browser are you using?

Hi Kenny,

Can you explain what you're seeing and what you were expecting to see?

I tried your code and the div seems to be containing the logo and the nav.

3 Answers

Hi Kenny,

I think you're missing a second colon in the clearfix css rule. It should be:

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

Nope it should only be one colon - https://css-tricks.com/snippets/css/clear-fix/

Either double colon or single colon is correct for the original 4 pseudo elements: :first-line, :first-letter, :before, :after

css3 added the double colon syntax to help distinguish pseudo classes from pseudo elements.

Going forward the double colon syntax will be required for any new pseudo elements. We didn't get any new ones with css3 but it looks like we will get some with css4.

I'd say it's better to get into the habit of double colon syntax now so you'll be doing it right when it's required.

See! Ignore me Kenny. Thanks Mattea!

I guess :: is good as well (and thanks Jason for that explanation, I hadn't read that before).

Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi everybody, sorry for the late answer. Strangely now everything works fine!

I redid the code completely in the same way en everything works fine now..

Thanks for the responses!