Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kenny Parewijck
Kenny Parewijck
4,602 Points
Posted by 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!

Mattea Turnbull
Mattea Turnbull
4,134 Points

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?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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

tracy
tracy
32,769 Points

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

Mattea Turnbull
Mattea Turnbull
4,134 Points

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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.

tracy
tracy
32,769 Points
tracy
tracy
32,769 Points

See! Ignore me Kenny. Thanks Mattea!

Mattea Turnbull
Mattea Turnbull
4,134 Points

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