Video Transcript

Hi, my name is Brian. I'm a web and graphic specialist, and today I am going to show you how to make a footer that hugs the bottom of the window using CSS. So have a very simple web page I created right here, opened up in Firefox on the right and on the left I have my html and my CSS in two separate text edit files. Okay so have a header and I have a content section. I have a menu div right here. Let's say I want to add a footer to the bottom of this page that hugs the bottom of the window so when I scroll up and down I want that footer to always be stuck on the bottom of the window pane. So let's start by creating the footer itself so I'm going to go into my html and create a div with a class of footer. You can name the class whatever you want. I'm selecting footer because this is in fact the footer and make sure I close that div and within that I'll just add some text. This is the footer, okay, and I'll save that. Let's just take a look at that without any style first. So here it is down here. It's at the bottom of the page. When I scroll up it doesn't move with it. Let's add some styles to this footer. So I'm going to go into my CSS and create a rule for a class of footer. When you're working with a class you want to start with a period so I'm putting period footer and then I'm opening the brackets. Let's make the background color black and the color of the text white and I'll make the width 100% and since there are some floated divs above this I have to make sure to type and clear both and now here's the important part to make this stick to the bottom of the page, you want to select a position of fixed, so position:fixed and then type in bottom 0 pix. So what that's going to do is it's going to make the div fixed to wherever you set the div. So I'm setting it bottom 0 pixels which means that footer will always be fixed to the bottom of the page. Okay, so let's hit save and refresh, and there we go. There's my footer and it's right at the bottom and no matter where I scroll, it's still there at the bottom of the window pane. So that's how you do it. That's how you create a footer that sticks to the bottom of the window using CSS. My name is Brian and thanks for watching.