Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now to get our outer page container to extend down to encompass all of the content inside of the individual promos that have a float property, we're going to need to add another element after the promos to clear the float. So let's go back to our text editor. Let's first go into index.html. Let's scroll down. And after our three promos here, let's add one more div at the same level as the promos. We're going to set a class of "clear-fix." Let's end that div.
So this is a class name that we're making up. You can call this anything you want. Let's choose File > Save. Let's come back to screen_styles.css. After our navigation element here, let's create a rule that targets that class so ".clear-fix." The property we're going to set in here is going to be clear and we're going to set that to both. The other thing I like to do is set a line height of one pixel and then choose Save.
So now let's come back out to our browser. Let's hit Reload and so now that div, if you can imagine, is down here. It's got a clear bulb set to it so the outer most page container will now extend down to encompass that div. And since that div appears after all of the individual promos and doesn't have a float, the outermost page container is forced to increase its height to encompass that element. Now that we have our float properties working, next we want to add one final rule to our footer for large screens.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.