Bummer! You have been redirected as the page you requested could not be found.

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 Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Background-color not applying to 'div'

I'm attempting to emulate the "How To Make A Website" example. In the video, the div is wrapped around the footer. For me personally I just want the section wrapped. However, the background color for the 'div' will not appear unless I encapsulate the footer into the 'div'. What can I do to remedy this?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Aldrich|Antic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <title>Decibal Repo</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Decibal Repo</h1>
        <h2>An Electronic Music Collection</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Main Repo</a></li>
          <li><a href="newreleases.html">New Releases</a></li>
          <li><a href="previews.html">Previews</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>
    </header>
      <div id="gallery_contain">
        <section>
          <ul id="gallery">
            <li>
              <a href="img/one.jpg">
                <img src="img/one.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/two.jpg">
                <img src="img/two.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/three.jpg">
                <img src="img/three.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/four.jpg">
                <img src="img/four.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/five.jpg">
                <img src="img/five.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
          </ul>
        </section>
      </div>
      <footer>
          <a href="http://facebook.com/hi"><img src="img/FB-f-Logo__blue_57.png" alt=''></a>
          <p>&copy; Benjamin Hedgepeth 2016.</p>
    </footer>
  </body>
</html>

img {
  max-width: 100%;
}

div#gallery_contain {
  width: 850px;
  margin: 0 auto;
  padding: 0 5%;
  background-color: #1a75ff;
  }

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

ul#gallery li {
  float: left;
  width: 45%;
  padding: 2.5%;
  background-color: #b3ffff;
  color: #ffff99;
}

footer {
  clear: both;
  text-align: center;
}

5 Answers

Tobias Helmrich
Tobias Helmrich
31,604 Points
Tobias Helmrich
Tobias Helmrich
31,604 Points

Hey Benjamin,

this problem occurs because your #gallery_contain div has no specified height. If you give it a height value you'll see the background. Also the section nested inside of the div doesn't have a specified height, this would work as well.

I made a small Codepen example here where you can see how it looks when you give the #gallery_contain div a height value (in this case I set it to 400px).

I hope I understood your question correctly and that I could help you to find a solution, if not or you have any further questions feel free to ask! :)

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Thanks for responding. In this video:

https://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/center-the-wrapper

a div was created. The only property utilized was the 'max-width property' to set the original width dimension of the wrapper. If no height was established why is there a height dimension being displayed on the document? The background color for the wrapper works if the footer is included and it doesn't work if it is not included. That's the clarification I'm seeking if I follow step by step in the tutorial example.

Tobias Helmrich
Tobias Helmrich
31,604 Points
Tobias Helmrich
Tobias Helmrich
31,604 Points

Ah, gotcha! The problem in your code is your float here

ul#gallery li {
  float: left;
}

Floated elements don't take up any space that's why the height of the parent becomes 0 in your case. There are two ways you could fix that: Remove the float: left from your list items or giving the property of overflow with the value hidden to its parent which would be the unordered list with the id of gallery. This will clear the floats and force the unordered list to expand and ignoring the list item's height which would be 0.

So if you add this

ul#gallery {
    overflow: hidden;
}

to your #gallery element it should display the background. Here is the working example. I hope that helps!

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Oh cool. That solves my problem. Could you explain how floated elements don't take up any space...thus why the parent was set to 0. An element by default does take up space. I'm slightly confused when you said that.

Tobias Helmrich
Tobias Helmrich
31,604 Points

Yes, maybe I explained it a bit confusing, sorry! Yes, they take up space, however floated elements are like the name implies not in the flow of the document. This means their parent collapses to a height of 0 because the height of the floated elements is technically 0 as they're not in the flow of the document. I also recommend reading the best answer of this Stackoverflow question as it's maybe explained a little better than my version. It can be a bit confusing because like you already said it takes up space but it's not in the flow of the document.

I hope that won't confuse you even more, I'm sorry for my poor explanation! :)

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Thanks. Very resourceful and helpful.