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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Fred Langemark
Fred Langemark
1,439 Points
Posted by Fred Langemark
Fred Langemark
1,439 Points

profile-photo Class

Please correct me if I'm wrong, but for the profile-photo class don't you need to set the 'clear' property to 'both'?

It doesn't look correct for me, unless I do this.

5 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Fred,

Are you using firefox? You should take a look at the Teacher's Notes for this video. :)

The problem is related to the floated header never being cleared.

clear: both will fix this specific problem in firefox.

However, I would recommend instead to clear the floated header in your wrapper div since it's the first element to follow the header. Clearing it there will make sure that your wrapper div will drop below the header.

This will not only fix this profile photo problem but also more general header gap problems that others have been having which happen in both firefox and chrome.

#wrapper {
  clear: both; /* Add this here then you don't have to do it in .profile-photo */
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
Peter Ramsing
Peter Ramsing
16,814 Points
Peter Ramsing
Peter Ramsing
16,814 Points

Could you paste the code you're referring to?

Fred Langemark
Fred Langemark
1,439 Points
Fred Langemark
Fred Langemark
1,439 Points

Of course, my apologies.

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  clear: both;
}

It is from the Make an About Page step of the Adding Pages to a Website of the How to Make a Website Course.

Here is the about.html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fred J Langemark III | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Fred J Langemark III</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Nick Pettit: This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy excercising, playing video games, drinking good coffee, and more.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/fredjl3">@fredjl3</a></p>
      </section>
      <footer>
        <a href="http://twitter.com/fredjl3"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/fredjl3"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Fred J Langemark III.</p>
      </footer>
    </div>
  </body>
</html>

And the corresponding main.css

/****************************************
GENERAL
****************************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
 text-decoration: none; 
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/****************************************
HEADING
****************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/****************************************
NAVIGATION
****************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/****************************************
FOOTER
****************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/****************************************
PAGE: PORTFOLIO
****************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


/****************************************
PAGE: ABOUT
****************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  clear: both;
}



/****************************************
PAGE: CONTACT
****************************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}



/****************************************
COLORS
****************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav links */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Peter Ramsing
Peter Ramsing
16,814 Points
Peter Ramsing
Peter Ramsing
16,814 Points

If I understand what you're getting at, when you begin to build in the responsive aspects of the site in later sections of this course you will see why you don't want to clear: both. I say come back again after completing that course and comment that it still doesn't look right, but my guess is that it will make sense later.

Hope that helps.

Fred Langemark
Fred Langemark
1,439 Points
Fred Langemark
Fred Langemark
1,439 Points

Teacher's Notes! How useful. :)

Sorry for making a post that was already covered, in the lesson I was taking. DUH!

Luckily I came to the conclusion suggested without noticing Nick giving the solution away. However, your solution seems a better one Jason, since it would avoid any unforeseen complications that may arise. So, thanks for sharing.