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 Polish the Navigation and Footer

Posted by Maties Alzina Soler
Maties Alzina Soler
2,307 Points

I can't add more space between the section and the footer

The footer starts immediatly (with a little space) after the last p element of the last image of the gallery. How can I get more space between the footer and the section? I tried with add values to the margin and padding of the both elements (footer and section) but It did not work.

Thanks!

Sarah Hoopes
Sarah Hoopes
6,304 Points

Can you post your code? What course are currently working on? Is it "How to Make A Website"?

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Yes, that's my currently course! How can I post my code? Do I have to copy and paste the code?

6 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi,

Right, I can see the issue now is the floated li tags here:

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

This is causing the surrounding parent to collapse.

I would recommend implementing one of the options found under the Techniques for Clearing Floats header here:

http://css-tricks.com/all-about-floats/

One of these options will resolve your issue as it's purely the parent div which is making it look as though the margin is doing nothing.

Thanks

-Rich

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Hi,

Wow! Thanks, that worked! I put a blank div element cleared after the div container.

Thanks Rich, really.

Maties Alzina Soler

Rich Bagley
Rich Bagley
25,869 Points

No problem. Glad it worked :)

-Rich

Sarah Hoopes
Sarah Hoopes
6,304 Points
Sarah Hoopes
Sarah Hoopes
6,304 Points

Here's how to post your code. I had to look it up too! I'm still learning!

https://teamtreehouse.com/forum/posting-code-to-the-forum

Here's the "footer" code I have for that course:

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc; 
}
Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi,

This is a guess but it sounds as though your footer styles could be missing a clear: both;.

This will clear any floats you may have set on the above tags.

Let me know if that helps.

-Rich

Maties Alzina Soler
Maties Alzina Soler
2,307 Points
Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Hi all!

Thanks for the answers, both. But my problem is still there. I had already clear: both;. The problem is I don't like my footer is as close to the previous element. I want more blank space. More space between where the section element ends and where the footer starts. Do you know what I mean?

Here is my HTML code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/main.css" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <title>BackFit&copy; | Home</title>
</head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1 id="textmarca">BackFit<span style="vertical-align:super; font-size: 18px">&copy;</span></h1>
        <h2 id="textlema">Take a look into your <span id="back">back</span></h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="current">Home</a></li>
          <li><a href="about-us.html">About Us</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="online_shop.html">Online Shop</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">
              <p>First image.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
        </ul>
        </section>
      </div>
        <footer>
          <a href="www.facebook.com/backfitproject"><img class="social-icon" src="img/facebook-wrap.png" alt="Facebook Icon"></a>
          <p>&copy; BackFit 2014</p>
        </footer>
  </body>
</html>

And here my CSS code (just the footer and the section related code):

/*********************** INDEX SECTION ***********************/

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

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery img {
  max-width: 100%;
  border-radius: 5px;
}

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

#gallery li p {
  color: #CED8BC;
  margin: 0;
  padding: 20px;
  border-radius: 5px;
  background-color: #808E65;
  font-size: 0.75em;
}

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

footer {
  background-color: #808E65;
  text-align: center;
  clear: both;
  margin: 2% 1% 0 1%;
  padding: 10px 0 0 0;
  border-radius: 10px 10px 0 0;
}

footer p {
  padding: 0;
  margin: 5px 0 0 0;
  font-family: 'Pacifico', cursive;
  color: #000;
}

.social-icon {
  padding: 5px 0;
  width: 20px; 
  height: 20px;
  margin: 0 5px;
}

Thanks Sara for helping... I had had to look it before! :(

Thanks both,

Maties Alzina Soler

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

Hi,

You could try increasing the margin or padding on the footer style.

Currently you have the margin set to 1% and the padding set to 10px 0 0 0.

The margin will increase the space on the outside of the footer and the padding will increase it inside.

Does this change anything?

Thanks

-Rich

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Hi Rich,

I changed the top margin of the from 2% to 5%, 10%, ..., but It doesn't make any change.

See it:

footer {
  background-color: #808E65;
  text-align: center;
  clear: both;
  margin: 10% 1% 0 1%;
  padding: 10px 0 0 0;
  border-radius: 10px 10px 0 0;
}

What could I do?

Thanks,

Maties Alzina Soler

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

Hi,

Can you try changing your wrapper code to the following?

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

You would then change the 10px to whatever value you needed.

Any difference?

Thanks

-Rich

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Hi,

I did it, but It doesn't make any change too.

Thanks Rich for the answers.

Maties Alzina Soler