CSS Floating Footer

floating footer always on the bottom and visible

Yes. It's the position: fixed property.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Demo: http://jsfiddle.net/ZsnuZ/

HTML Footer floating slightly above bottom of page at certain resolutions

Can you try this? I just added an additional container and set a minimum height to it so it uses the available space in the viewport and pushes the footer to the bottom.

To further explain, you have 3 main sections on your page:

Navar or Header
Content
Footer

The idea is to make the content as tall as your screen so the footer is not positioned above the bottom edge of the screen. So you can just create a single container where all of your content's sections will be, and adding some CSS to make it use all that available height.

What I did then was creating the main-container div, and then adding a single CSS rule:

.main-container: {min-height: calc(100vh - 221px)}

I use the calc() function so I can have a bit more control on the final size, in this case, 221px is the sum of your footer's total height + the navbar's total height (you can confirm this just by inspecting each element), so now the .main-containr will have a minimum height of your total screen minus the space used by the footer and navbar, that way, if you have little content on the screen, the footer will still be at the bottom edge because the main container is using that space.

html,body {  width: 100%;  height: 100%;  margin: 0px;  padding: 0px;  overflow-x: hidden;}
/*  Target the element that holds all your content, and set a minimum height so it uses the full viewport height (100vh)  */
.main-content {  min-height: calc(100vh - 221px)}
body {  background-color: white;  color: rgb(85, 85, 85);  font-family: Arial, Helvetica, sans-serif;  font-size: 16px;  line-height: 1.6em;  margin: 0;}
.clr {  clear: both;}
.container {  width: 80%;  margin: auto;  overflow: hidden;}
#navbar .container {  margin: 0;}
.button {  background-color: rgb(51, 51, 51);  color: white;}
.button:hover {  background-color: green;}
#myHeader {  background-color: green;  color: white;}
#myHeader .container {  width: 90%;}
#navbar {  background-color: rgb(51, 51, 51);  color: white;}
#navbar ul {  padding: 0;  list-style: none;}
#navbar li {  display: inline;}
#navbar a {  color: white;  text-decoration: none;  font-size: 18px;  padding: 15px;}
#showcase {  background-image: url("../Images/showcase.jpg");  background-position: center right;  background-size: 100% 100%;  color: white;  min-height: 300px;  margin-bottom: 30px;  text-align: center;}
#showcase h1 {  color: white;  font-size: 50px;  line-height: 1.6em;  padding-top: 30px;}
#main {  float: left;  width: 70%;  padding: 0 30px;  box-sizing: border-box;}
#sidebar {  float: right;  width: 30%;  background: rgb(51, 51, 51);  color: white;  padding: 0 30px;  box-sizing: border-box;}
#mainFooter {  background: rgb(51, 51, 51);  color: white;  text-align: center;  padding: 20px;  margin-top: 40px;}
@media(max-width: 600px) {  #main {    width: 100%;    float: none;  }  #sidebar {    width: 100%;    float: none;  }}

<body>  <header id="myHeader">    <div class="container">      <h1>Finn Llewellyn</h1>    </div>  </header>
  <nav id="navbar">    <div class="container">      <ul>        <li><a class="button" href="#">Contact</a></li>        <li><a class="button" href="#">Projects</a></li>        <li><a class="button" href="#">Cool Things</a></li>        <li>Note: These don't do anyting yet lol</li>      </ul>    </div>  </nav>    <!-- Group all of your content inside a single container, not including the navbar and the footer -->  <div class="main-content">    <section id="showcase">      <div class="container">        <h1>Computers are cool lol</h1>        <h2>That's why this site is awful on mobile</h2>      </div>    </section>
    <div class="container">      <section id="main">        <h1>About Me</h1>        <p>          My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and which spec components will best suit a specific use case. I also like to think I'm alright          at diagnosing and solving technical issues. Staying true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn a real, spoken language, like Spanish. Hopefully          i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science, Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a          B-Tech in softwar/app development.        </p>      </section>      <aside id="sidebar">        <h1>Cool Things</h1>        <ol>          <li>Star Wars</li>          <li>Half-Life series</li>          <li>DOOM</li>          <li>Radiohead</li>          <li>Blur</li>          <li>R.E.M</li>          <li>YouTube</li>          <li>AMD Ryzen CPUs</li>          <li>Other geeky stuff</li>        </ol>      </aside>    </div>  </div>
  <div id="mainFooter">    <p>This footer is just here to look nice</p>  </div>

Footer is floating across div

Add

clear: both;

to the footer element. Its because the content above it is floated and hasn't been cleared.

How to make a sticky footer using CSS?

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Sticky footer + floating elements

Try:

#body {
   overflow:hidden;
}

EDIT: This way you won't need an extra element to clear the floats.

How do I get a floating footer to stick to the bottom of the viewport in IE 6?

This may work for you. It works on IE6 and Firefox 2.0.0.17 for me. Give it a shot. I made the footer's height very tall, just for effect. You would obviously change it to what you need. I hope this works for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liquid Footer</title>
    <style type="text/css">
    .footer {
background-color: #cdcdcd;
height: 180px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed;
left: 0px;
bottom: 0px;
}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {height:100%; overflow-y:auto;}
    html {overflow-x:auto; overflow-y:hidden;}
    * html .footer {position:absolute;}
    </style>
    <![endif]-->
</head>

<body>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   <div class="footer">-- This is your liquid footer --</div>
</body>
</html>