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

Watch Video

Posted February 23, 2015 8:57pm by

Clear: both; not moving the facebook and twitter links out of the gallery.

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

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

February 23, 2015 9:34pm

Hi Jason

Can you post your CSS and HTML. This will help others find a solution to your problem.

February 23, 2015 9:38pm

There isn't anything wrong with your footer code. Might the problem lie somewhere else?

If you can post all of your html and css, each between three backticks ( ``` ), someone should be able to help diagnose the issue.

February 23, 2015 9:43pm

Hello,

Thank you for the quick reply. Here is my index.html and main.css.

<!DOCTYPE html>
<html>

  <head>
    <meta charset = "UTF-8">
    <title>Jason Boyer | Engineer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <!--Fonts need to come in after normalize, but before custom, bc will be using in our custom 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">
  </head>
  <body>
    <header>
      <a href = "index.html" id = "logo">
        <h1>Jason Boyer</h1>
        <h2>Engineer</h2>
      </a>
      <nav>
        <ul>
          <li><a href = "index.html" class="selected">Portfolio</a></li>
          <li><a href = "about.html">About</a></li>
          <li><a href = "contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id = "wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href = "img/numbers-01.jpg">
              <img src ="img/numbers-01.jpg" alt = "">
              <p>Experimentation with color and tecture.</p>
            </a>
          </li>
          <li>
            <a href = "img/numbers-02.jpg">
              <img src ="img/numbers-02.jpg" alt = "">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href = "img/numbers-06.jpg">
              <img src ="img/numbers-06.jpg" alt = "">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href = "img/numbers-09.jpg">
              <img src ="img/numbers-09.jpg" alt = "">
              <p>Creating shapes using repetition</p>
            </a>
          </li>
          <li>
            <a href = "img/numbers-12.jpg">
              <img src ="img/numbers-12.jpg" alt = "">
              <p>Experimentation with color and tecture.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href = "http://twitter.com"><img src = "img/twitter-wrap.png" alt = "Twitter Logo"></a>
        <a href = "http://facebook.com"><img src = "img/facebook-wrap.png" alt = "Facebook Logo"></a>
        <p>&copy; 2015 Jason Boyer.</p>
      </footer>
    </div>  
  </body>


</html>

And my 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%;
}

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

#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.75ems;
  margin: -5px 0 0;
  font-weight: normal;
}



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

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



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

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



/***********************************
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 list items anchor elements paragraphs */
#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


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

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


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


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


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


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


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

/* selected nav link */
nav a.selected, nav a:hover{
  color: #32673f;
}

February 23, 2015 9:48pm

We're losing some of your code. Make sure you're using backticks ( ``` ), which are usually on the tilda ( ~ ) key, and that they're on their own line.

3 Answers

February 23, 2015 10:07pm

You are currently selecting your footer element using an ID tag that is not present in your HTML.

Take out the # and you should be all set!

/* Remove the # from your current footer rule. */
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

February 23, 2015 9:57pm

Try adding the following clear fix to your CSS. Let me know if you still have an issue.

#gallery:after {
  content: "";
  display: table;
  clear: both;
}

February 24, 2015 3:24am

Thanks Adam. It wound up being the #. I appreciate your help on this though. I'm curious what your CSS does? I'm totally new to this.

February 24, 2015 6:53am

No problem Jason, glad someone was able to fix your issue.

The CSS I posted is known as a clear fix. You can use it on a parent element who's child elements are set to float either left or right. It will make sure that the parent element doesn't collapse when containing floated child elements. It then makes it easier to continue adding more content after as you will not need to use the clear CSS property.

It's used throughout most of the front-end development courses on Treehouse. Here is an article explaining it in more detail with other examples of how to create a clear fix.

http://css-tricks.com/snippets/css/clear-fix/

February 24, 2015 3:21am

Thank you everyone for your help. It was the # in the footer rule that was causing the issue. It is working great now!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Jason Boyer

Jason Boyer

Clear: both; not moving the facebook and twitter links out of the gallery.

footer{

adamdonatello

adamdonatello

rydavim

rydavim

Jason Boyer

Jason Boyer

rydavim

rydavim

3 Answers

rydavim

rydavim

adamdonatello

adamdonatello

Jason Boyer

Jason Boyer

adamdonatello

adamdonatello

Jason Boyer

Jason Boyer