Collapsed containers

So, everything is great with the columns, except that if you try and scroll the page down, you will see that we are really tight to the bottom.

Let's see what happens when we add a margin-bottom property to the container that wraps around everything: secondary-section. Let's say margin-bottom: 40px:

/**************** 
3 columns 
****************/ 
.secondary-section { 
  margin-bottom: 40px; 
} 

If we save this, it really does nothing in the browser. The content is still sitting right at the bottom. Let me further illustrate this problem. If I had a background color of green, then you'd expect the entire background to be green:

.secondary-section { 
  margin-bottom: 40px; 
  background-color: green; 
} 

However, if we add the preceding code and save it, the background doesn't become green. So, let's actually inspect this element. Let's inspect secondary-section in the browser using Chrome's DevTools. We will see both margin-bottom and background-color are in the process of getting applied. But we don't see anything in green on the page:

When you put your mouse over the secondary-section element, you will see it highlights the space that it occupies in that peachy color on the screen (you'll see it as a different shade of gray in the following screenshot if you're looking at a printed copy):

The container has actually collapsed. This is what happens when all the elements inside a parent element are floated: the container collapses, floats are taken outside the normal flow, and the container has no height because of this.

Let's take a look and see what we can do to fix this.