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

Posted by Brad Will
Brad Will
534 Points

Footer not positioned right and images not separated?

http://prntscr.com/3c6ham

Basically refer to title. Why is my footer in the side area and why are my images not separated from each other?

Here's my HTML and CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bradley | Test</title>
    <link rel="normalize" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic'    rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/stylesheet.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Bradley</h1>
        <h2>Tester</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li
          <li><a href="about.html">About</a></li>
          <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>Experiment with image for site.</p>
        </a>
        </li>
          <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Testing out the blending in PS</p>
        </a>
        </li>
            <li>
          <a href="img/numbers-06.jpg">
           <img src="img/numbers-06.jpg" alt="">
           <p>Creating 80's style</p>
        </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
           <img src="img/numbers-09.jpg" alt="">
           <p>Photoshop brushes</p>
        </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
           <img src="img/numbers-12.jpg" alt="">
           <p>Trying out site</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; 2014 Bradley.</p>
    </footer>
      </div>
  </body>
</html>

/******************************
GENERAL
*******************************/
body {
font-family: 'Open Sans Condensed', sans-serif;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

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

nav ul {
 list-style: none;
}



/******************************
Header
*******************************/

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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15 0px;
  font-size: 1.75em;
  font-weight: 0.8em;
  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;
}
/******************************
Colours
*******************************/


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

/* Nav Background Colour*/
nav {
  background: #2980b9;
}

/* Hover and Selected colours */
nav a.selected, nav a:hover {
  color: #32673f;
}

a {
  color: #6ab47b;
}

/* Site Body */
body {
  background-color: white;
  color: #999;
}

/* Green Header */
header {
  background: #3498db;
  border-color: #599a68;
}

/* Main title/sub-title */
h1, h2 {
  color: #fff;
}

3 Answers

Scott Fergus
Scott Fergus
1,792 Points

Hi, Looks like you are missing the clear: both; property within your footer css. Essentially it is taking on the float: left; you have set in your Page Portfolio section.

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

The images are not separated because you have missed the semi colon (;) at the end of the margin: 2.5%; statement

''' css

gallery li {

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

Cheers

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

Your code is not showing up. If you watch the video at the right called "Tips for asking questions", they show you how to post it so that it's formatted correctly.

Brad Will
Brad Will
534 Points

I've added my code :)

Jo Cavagnis
Jo Cavagnis
2,304 Points
Jo Cavagnis
Jo Cavagnis
2,304 Points

Is it possible for you to take a screen shot of your css code?

it looks to me like your images have a problem with the padding and margin.

Here is a link to how your code should look:

http://codepen.io/anon/pen/DrpHK/