is usually quite difficult. So here you can see I've got some content just in my body of my page, on my wrapper. And I've got some content in the footer as well.

So as I pull this in, you can see that not only does the footer fall down with the content, it also does respond nicely. So it's obviously not a fixed height footer.

So this is extremely easy to do. So let's go ahead and look at how we do this. So we'll go ahead and write the markup first. You can see I've got a basic document laid out here.

And I've got a main.css stylesheet linked in, with nothing in it at the moment. So the first thing we want to focus on is the wrapper. So this is just where all of your content will go.

If you're incorporating this into your website as it is, you may need to change things around here. But this is generally how things are going to work. So I'm going to say this is the content.

And we'll also have a footer down here. This doesn't need to be a HTML5 footer element. It can be whatever you want. And inside of here as well, we'll create a wrapper.

The reason we're going to do this is we need to add some padding to this. We won't be able to add padding to the footer. We'll see why in a moment.

So I'm just going to say this is a footer. OK, so what we're going to do now is over in main.css, we're going to apply some styles to the HTML and the body. And the first thing I'm going to do

is set the margins to zero, just so everything sort of sits back in its place like this. And we also want to do a few hacky things. And this is a very hacky solution, but it works.

So I'm going to set the display type of HTML and body as a table. I'm going to set the height to 100%. And I'm going to set the width to 100% as well.

Now let's fill in our wrapper styles. And let's also fill in some footer styles. In the footer specifically, I'm just going to change the background color to slate gray.

And for the wrapper, I'm going to give that the 20 pixels padding I spoke about a moment ago. So that now gives us this. So we can start to work on pulling this footer down

to actually make it sticky. So with the wrapper, we want the height to be auto here. And this isn't going to do much. But in a minute, what we're going to do

is we're going to change the actual footer to be a table row. And this is part of the hack, really. We're working with tables here.

Although it does seem odd, we are technically using CSS properties. We're not actually marking up tables here. So personally, I don't see a problem with this solution.

So we're going to set the display type of the footer to a table row. And I'm going to set the height here to one pixel. So now what we're going to see is

we're going to see this literally just stick to the bottom. And the benefit to this is that, obviously, as we add more markup here, this is going to be responsive.

Say, for example, we were to add a couple of lorem ipsum paragraphs just here, and we were to do the same in the footer, maybe just a few this time. Then we can head over here.

And the first thing that we notice is that all of our content in our main wrapper, or main section, whatever, however you're going to mark this out, will push down

the footer, which is what we expect. We don't want it to overlap or anything like that. And second of all, you'll see that the height of the footer has increased.

And in actual fact, when we pull this in, the height increases even more to take into account the height pushing from the content. So that's pretty much it.

It's really easy to do and quite clean. No sort of extra markup required. Like you see, sometimes we get a push class or a push ID being added in our markup somewhere.

This just allows you to keep your markup to an absolute minimum. So that's how we create a responsive sticky footer with CSS.