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

Posted by Reginald Williams
Reginald Williams
4,818 Points

how do i get horizontal space between the gallery images and how do i get my footer to the bottom of the page ?

here is my CSS

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}
#gallery li {
    float: left;
    width:45%;
    margin: 2.5%
    background-color:#f5f5f5
    color:#bdb3c7
}

here is my html 

<!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
                 <title>Reginald Williams| User Experience </title>
                 <link rel="stylesheet" href="css/normalize.css">
                 <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
 <header>
      <h1>Reginald Williams</h1>
      <h2>User Experience Designer</h2>
    <nav>
       <ul>
         <li><a href="index.html">about</a></li>
         <li><a href="about.html">other</a></li>
         <li><a href="page.html">pagr</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="picture of something">
            <p>ifk</p>
        </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="picture of something">
            <p>playing with photoshop</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="picture of something">
            <p>ifk</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09jpg">
            <img src="img/numbers-09.jpg" alt="picture of something">
            <p>ifk</p>
        </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="picture of something">
            <p>ifk</p>
        </a>
        </li>
      </ul>
     <p>About will go here </p>
    </section>
    <footer>
      <a href="http://twitter.com/reginaldmw"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="www.linkedin.com/in/regwill909"><img src="img/linkedin-icon-small.png" alt="Linkedin Logo"></a>
      <p>&copy; 2014 Reginald Williams.</p>
     </footer>
   </div>
  </body>
<html>

2 Answers

Andrew McCormick
Andrew McCormick
17,730 Points

to fix an element to the bottom, simply use position: fixed with bottom: 0 . as for width between your gallery items, you just want to add margin-left or margin-right to your li elements.

John Grillo
John Grillo
30,241 Points
John Grillo
John Grillo
30,241 Points

McCormick got it right. I'd use margin: auto; as that would set it automatically. Don't worry, I've been doing this for years and still have trouble.

Try using the float: left; property on everything BUT the footer if you haven't done that already.

Remember: Padding is like padding in a package; it defines the space inside na element. margin is the space between elements....like margin for error. Or the space between your car and the one in front of you. The padding in that case would be an empty passenger seat.