Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

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

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

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

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

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

No problem :)