Footer Troubleshooting

Hello I have made a footer in my joomla template but it's not working how I want it too. It stays at the bottom of the screen but on pages with larger content it stays in the same spot. See image attached.



My HTML code is,

<div class="footer">
<p>
<div align="left">
&copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
</div>
</p>
</div>

Code (markup):

And my CSS is,

.footer {
background-color: #F6861F;
width: 1920px;
height: 190px;
position: fixed;
}

Code (markup):

Many thanks if you can help me.

 

That's what position:fixed does -- sounds like what you are looking for is a "100% min-height layout" which is often a roll of the dice in designs. Pretty much the 'reliable' method involves making sure the footer is always a fixed size, putting a wrapper around the content set to "min-height:100%" and then use either absolute positioning or a negative margin to 'ride the footer up' over the content.

"modern" browsers you can also TRY using flex-box, but beware that has it's own slew of PAINFUL issues including no two browser makers interpreting the meaning of the layout specification the same way. A laugh since CSS3 "flex" was supposed to clear up those problems!

Though, why are you opening and closing PHP twice with two separate echo to do the job of one? Also what makes that text a paragraph/complete thought?

Really though to implement what you are asking in a meaningful example, I'd have to see how the rest of the page is coded.

 

position:bottom;
margin:bottom;

 

I can see by your avatar that you're an ALF (alien life form), so on which world is 'bottom' a valid value for either the position or the margin property?