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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Mia Nielsen
Mia Nielsen
665 Points
Posted by Mia Nielsen
Mia Nielsen
665 Points

Footer is appearing on the left, next to images

The copyright and social media icons are appearing on the left next to the images, and are not in the bottom of the page anymore. I've tried to look it over again and again without luck, and I've also tried to look at the previous questions and solutions without luck.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mia D. Nielsen | IHM</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic|Lobster|Ubuntu+Condensed' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Mia Duberg Nielsen</h1>
        <h2>Student of International Hospitality Management</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>some text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>some text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>some text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>some text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>some text</p>
            </a>
          </li>
        </ul>
      </section>
    </div>
      <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 Mia Duberg Nielsen.</p>
      </footer>
  </body>
</html>

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 */
#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-family: 'Lobster', sans-serif;
  margin: -5px 0 0;
  font-size: 0.9em;
  font-weight: normal;
}



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

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



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

footer {
  font-size: 0,75em;
  text-align: center;
  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;
}



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

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

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

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

Thank you in advance

Rich Bagley
Rich Bagley
25,869 Points

Hi Mia,

I've just updated your question so the code is formatted in the post and easier to read for those answering :)

-Rich

2 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Mia,

Can you try adding a clear: both; to your footer style please?

Does this move the footer below?

-Rich

Stefan Mach
Stefan Mach
3,691 Points
Stefan Mach
Stefan Mach
3,691 Points

Just wondering as I learn this too, but does your gallery need to be floated left as you have it? If it naturally comes after the header, and there is nothing that you want appearing to its right side, I would think your floating it left would take it out of the natural page flow and result in your footer ending up under the gallery. Just a thought, and I know you found another fix with the clear.

Mia Nielsen
Mia Nielsen
665 Points
Mia Nielsen
Mia Nielsen
665 Points

Thank you for the help and such a fast answer! This solved my problem!

Rich Bagley
Rich Bagley
25,869 Points

No problem :)