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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Joshua Lyons
Joshua Lyons
511 Points
Posted by Joshua Lyons
Joshua Lyons
511 Points

Footer Background color fills the screen.

When I float the ul items it allows my footer background color to fill the screen.

4 Answers

Mark Truitt
Mark Truitt
17,230 Points

Can you provide an example of your code? Normally this happens when it breaks the container in some fashion.

Mark Truitt
Mark Truitt
17,230 Points

This is a common issue with floats. You need to clear them after.

A lot of people make a clear or clearfix class and either attach in a empty div. You could also attach clear: both to the footer to fix this as well. 

footer { 
  background: #000; 
  clear: both;
  padding-bottom: 0;
  text-align: center;
}
Mark Truitt
Mark Truitt
17,230 Points

You will want to take a look into using clear for floats. This can cause problems later on down the road.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Joshua Lyons
Joshua Lyons
511 Points
Joshua Lyons
Joshua Lyons
511 Points

awesome! That's very helpful! thank you.

Joshua Lyons
Joshua Lyons
511 Points
Joshua Lyons
Joshua Lyons
511 Points

/************************ General ************************/

body { font-family: Ailerons; color: #6ab47b;

}

a { text-decoration: none; color: #6ab47b; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5.5%; font-size: 2.0em; }

img { max-width: 100%; }

/************************ Heading ************************/

logo {

text-align: center; margin: 0; }

h1 { float: center; font-size: 2.4em; margin: 0 15px; padding-top: 10px; }

h2 { font-size: 1.2em; margin: -9px 0; }

h1, h2 { text-align: center; font-weight: normal; }

header { background: #000; border-color: #599a68; }

nav ul { font-size: 1.3em; text-align: center; list-style-type: none; padding-bottom: 10px; padding-left: 0; padding-top: 20px; }

nav a:hover { color: #fff }

/************************ Colors ************************/

/************************ Footer ************************/

footer { background: #000; padding-bottom: 0;

text-align: center;

}

footer img { padding-top: 25px; }

footer p {

padding-left: 0; padding-bottom: 34px; margin: 0 0; }

/************************ Page: Portfolio ************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mr. Ryan Lyons|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

<body>

<header>
  <a href="index.html" id="logo">
    <h1>Mr. Ryan Lyons</h1>
    <h2>designer</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="bitch">
        </a>
        <p>Experimentation with color and texture.</p>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
        </a>
        <p>Playing with blending modes in photoshop.</p>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
        </a>
        <p>Trying to create 80's glow.</p>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
        </a>
        <p>Photoshop drips.</p>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
        </a>
        <p>Repitition shapes.</p>
      </li>
    </ul>
  </section>
</div>

<footer>
    <a href="https://www.facebook.com/bigrojolyons">
      <img src="img/bllogo.jpg" alt="">
    </a>
  <p>&copy; 2017 Joshua Lyons.</p>
</footer>

</body> </html>

Joshua Lyons
Joshua Lyons
511 Points
Joshua Lyons
Joshua Lyons
511 Points

i ended up using overflow: auto in the div id="wrapper"