Much like my last post, I could never get my footer to stay at the bottom of my main content area without hard coding it at the bottom of each page. This time I figured it out based off of something else I was researching. So again, with only 1 CSS ID selector, I’m able to keep my footer in the same place on every page, no matter how much content is there. Here is how it works:

This is the CSS part (your numbers may vary, of course):

#container {position: absolute; min-height: 600px;}
#footer {position: absolute; bottom: -10px; left: 50px;}

This is the HTML part:

<div id="container"> Your content here.
<div id="footer"> Footer here </div>
</div>

Basically, we’re setting the position to absolute so that it stays where you tell it to. The ‘min-height’ attribute allows the container to scale with the content. Because you put the #footer inside the #container div and you set it to be positioned at the bottom, it will always stay at the bottom of the #container div, no matter how far down it scales.

 

I’ve been working with CSS for a while on my websites but one thing always plagued me; I couldn’t get the height of my page to scale with my content automatically. I always had to write a separate ID selector for each page set to a fixed height. I don’t know why I never just google’d it, but for some reason, 6 websites later, I did. It wasn’t rocket science, it was a simple

#container {min-height:###px;}.

Once I set the min-height, no matter how much content I added, it scaled to fit. Presto! Problem solved and lots of time saved. Make sure that any content you put in here is set to position: relative; not absolute. If it’s absolute, then the container won’t scale.