My Footer Floats

Why is my footer floating to the top?

When items are floating, they come out of the flow of the rest of the document and can give you strange results like this.

The simplest solution is to add a clear to the footer. A clear more or less tells the element to clear the floating items, or go below them, instead of under them.

footer {
  clear: both;
}

For better control on things, I'd suggest also looking into the clearfix.

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>

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/

Footer floating in the middle of the page

You HAVE TO SET height on html and body and then on footer set position absolute. Use below css

html, body {padding:0; margin:0; height:100%;}
footer{position: absolute; bottom: 0; left: 0; right: 0;}

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.

Float left is not working in my footer so it is not displaying inline properly

Its because your not using clearfix. I looked at your code but there were so many repeats I didn't want to paste a placeholder to see what it actually looked liked. From what you described, a part of your problem lies in floating without properly clearing. When you float elements you have to fix the parent afterwords because floating disrupts the natural block stacking order applied to block elements.

I repeat ... add clearfix to the PARENT. https://css-tricks.com/snippets/css/clear-fix/

Your second problem is that you have all these parts to your footer that are displaying images without a specified width. Because I don't know what the images are its hard to say, but if you are displaying a gallery like that my advice is, crop the photos so they are all equal in size. add

img{
width:100%;
}

to the top of your css,

and lastly, you can apply a max width and width value to your footer items to keep it responsive. (Make sure they do not exceed 100%). What I mean is, all your little sections of your footer could be width:10%; so when they float in line, all of the widths add to 100%(this doesn't account for margin and padding so be careful)

If you want me fiddle around with the code, please add placeholder images, or upload your pictures to an images hosting site so I can see what it looks like on my screen.

Update: I added your placeholder images and added width to your div. Here is your updated css

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.page{
    height: 100%;
    width: 100%;
    text-align: center;
    }
    .bgood-footer{
        width:100%;
        height: 20%;
        position: fixed;
        margin:0 auto;
        bottom: 0;
    }
    .mobile-app{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png-app.png');
        background-repeat: no-repeat;
    }
    .talk{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngo-us.png');
        background-repeat: no-repeat;
        width:120px;
    }
    .careers{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngs.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .press{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .blank{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .fb{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .yt{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .tw{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ig{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ordering-loc{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
width:200px;
    }