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

Kristin Ashouri
Kristin Ashouri
2,542 Points
Posted by Kristin Ashouri
Kristin Ashouri
2,542 Points

Images stay in one column and footer doesn't stay at the bottom

I've looked through my code and I can't see what I've done wrong

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kristin Ashouri | Developer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Kristin Ashouri</h1>
        <h2>Developer</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="Image/Resume.png">
              <img src="Image/Resume.png" alt="">
              <p>Resume</p>
            </a>
          </li>
          <li>
            <a href="Image/CoverLetter.png">
              <img src="Image/CoverLetter.png" alt="">
              <p>Cover Letter</p>
            </a>
          </li>
          <li>
            <a href="Image/analysis.png">
              <img src="Image/analysis.png" alt="">
              <p>Travel Analysis</p>
            </a>
          </li>
        <!--<li>
            <a href="Image/numbers-09.jpg">
              <img src="Image/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes</p>
            </a>
          </li>
          <li>
            <a href="Image/numbers-12.jpg">
              <img src="Image/numbers-12.jpg" alt="">
              <p>Creating shapes using repition</p>
            </a>
          </li>-->
          </ul>
      </section>
          <footer>
        <a href="http://twitter.com/nickrp"><img src="Image/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/kristinashouri"><img src="Image/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Kristin Ashouri. </p>
        </footer>
     </div>
   </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 {
  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;
}

/******************
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: #d4aae3;
  border-color: #c57ae1;
}

/* nav background on mobile*/
nav { 
  background: #c57ae1;
}
/*logo text */
h1, h2 { 
  color: #fff;
}

/* links*/
a {
 color: #d4aae3; 
}

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #8b599e
}

3 Answers

Arthur Crocquevieille
Arthur Crocquevieille
15,612 Points
Arthur Crocquevieille
Arthur Crocquevieille
15,612 Points

Hey !

You forgot a semicolon in your #gallery li {width:45%;} and in order to have your footer stay at the bottom you have to use clear:both; on the footer because you floated left your list elements in your #gallery

Hope it helps :)

raymondnicholl
raymondnicholl
7,413 Points
raymondnicholl
raymondnicholl
7,413 Points

On your Gallery code you need to add a ";" after width like this 

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

For Your Footer try adding the "Clear: both;" to your code

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}
Kristin Ashouri
Kristin Ashouri
2,542 Points
Kristin Ashouri
Kristin Ashouri
2,542 Points

Oh wow, maybe I should practice at a more normal hours! Thanks so much!