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

Posted by Rafal Dziobek
Rafal Dziobek
3,771 Points

Float CSS clear fix

Hello, boyz and girlz. I have another problem with floats... So I've created a menu by using ul - I've floated li to the right and cleared the parent ul. then .hero section works fine but .boy goes on top of .hero section.

I'm only interested in solving it by using: 

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

!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Insurance website 2nd project</title>
  </head>
  <body>
    <header>
      <nav>
        <ul class="group">
          <li><a href="#">Products</a></li>
          <li><a href="#">Learn</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <section class="hero">
        <h1>LIFE INSURANCE THAT<br>ALSO CREATES<br>WEALTH</h1>
        <h2>Only we give you investment with your<br>life insurance policy at no extra cost.</h2>
        <a href="#">Get Started</a>
      </section>
    </header>

    <main>
      <section >
        <div class="boy">
          <img src="imgs/boy.png" alt="boy">
        </div>
        <div class="boytext">
          <h3>Insure your life, and<br>we invest in you.</h3>
          <p>We match up to 100% of your time insurance premium and invest it for you at no extra cost.Every premium you pay helps create wealth for your future.</p>
          <a href="#">More</a>
        </div>
      </section>
    </main>

  </body>
</html>

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1em;
  font-family: "Helvetica";
}
body {
  max-width: 1440px;
  margin: auto;
}
header {
  height: 60px;
  margin: auto;
}
nav ul {
  margin-right: 150px;
}
nav ul li {
  list-style: none;
  float: right;
  display: inline-block;
  padding: 15px 20px;
  margin-left: 20px;
}

/* Links ----------------------------------------------------------------- */

a:link {
text-decoration: none;
}
nav a:link {
  color: #0F2B76;
}
nav a:hover {
  color: #60B2FC;
 }

/* float clear fix ----------------------------------------------------------------- */

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

/* Hero Header -----------------------------------------------------------------*/

.hero {
  height: 600px;
  background: url(imgs/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  color: #0F2B76;
  text-align: right;
}
.hero h1 {
  font-size: 3em;
  padding: 70px 125px 80px 0;

}
.hero h2 {
  font-size: 1.5em;
  font-weight: lighter;
  padding: 0 110px 90px 0;
}
.hero a {
  display: inline-block;
  padding: 20px 45px;
  background: linear-gradient(#9052CC,#57289D);
  font-size: 1.875em;
  font-weight: bolder;
  color: #fff;
  margin-right: 175px;
  border-radius: 5px;

}

Please don't be harsh on me ;) I've been sitting 34min trying to solve it...

3 Answers

deebird
deebird
7,558 Points

You set your header height to 60px...thats probably the issue. I assume you wanted the nav to be 60px not the header since you have a bunch on content inside the header

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

I have floated .hero to the left and it worked, but is it the correct way of doing it and why?

Rafal Dziobek
Rafal Dziobek
3,771 Points
Rafal Dziobek
Rafal Dziobek
3,771 Points

Well, it was and I didn't need to float hero afterwards.. I'm sorry for being dumb