Sticky footer not working with floats

Question

See my codepen here: codepen

I'm trying to keep the footer always at the bottom of the page, and I tried the sticky footer code from the CSS-tricks site, but I think the floating elements in the code is preventing the footer from sticking to the bottom. Any ideas around this?

Tks!

Below is my code:

* {
  box-sizing: border-box;
  font-family: "Times New Roman", serif;
}
body {
  position: relative;
  height: 100%;
}
.main-container {
  min-height: 100%;
  margin-bottom: -3rem;
}
.main-container:after {
  content: "";
  display: block;
}
section {
  width: 100%;
}
.hero-section {
  width: 100%;
  height: 700px;
  background: white url("http://www.placehold.it/1600x700") no-repeat fixed center;
}
.large-text {
  font-size: 5.2rem;
  font-weight: 500;
}
.medium-text {
  font-size: 2.1rem;
  font-weight: 100;
}
.small-text {
  font-size: 1.2rem;
}
.generic-section {
  margin-top: 5rem;
}
.generic-center-text {
  width: 70%;
  margin: 0 auto;
}
.generic-left-image {
  float: left;
  width: 30%;
}
.generic-right-text {
  float: right;
  width: 65%;
  padding: 3%;
  border: 1px solid red;
  margin: 0;
}
.section-center {
  text-align: center;
}
footer {
  border: 1px solid red;
  width: 100%;
}
footer,
main-container:after {
  height: 3rem;
}

<div class="main-container">

  <!--hero banner section-->
  <section class="hero-section">
    <h1 class="large-text">Lorem Ipsum</h1>
    <h2 class="medium-text">12 Nov 1929 – 14 Sep 1982</h2>
  </section>


  <!-- intro section -->
  <section class="generic-section section-center">
    <img src="http://placehold.it/70x70" alt="" />
    <h2>Lorem Ipsum dolor sit amet</h2>
    <p class="generic-center-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue quam in sodales cursus. In id est vel sapien posuere dictum. Nulla ultricies mi quis odio condimentum, nec porta ex varius. Vivamus imperdiet ante at viverra scelerisque.</p>
  </section>


  <!-- details section -->
  <section>
    <img class="generic-left-image" src="http://www.placehold.it/400x500" alt="" />
    <p class="generic-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque dui eget arcu aliquam, eu eleifend est feugiat. In ac purus a mi suscipit congue et eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
      mus. Proin at aliquam odio. Suspendisse dapibus imperdiet fringilla. Proin pulvinar luctus orci. Sed ut eros condimentum, pretium neque eu, finibus nunc. Vestibulum bibendum condimentum cursus. Nulla id nibh at nisi venenatis egestas vitae sed arcu.
      Maecenas posuere tempor semper. Curabitur eu pulvinar sem, in cursus nisi. Morbi semper, lacus in euismod accumsan, diam felis fermentum urna, quis viverra risus sapien sed nisi. Integer ac convallis nunc, eu gravida metus. Ut et consequat purus.
      Morbi volutpat placerat erat, nec facilisis dolor aliquet quis. Aliquam urna tortor, tempor in justo nec, vehicula vestibulum augue.</p>
  </section>


  <!-- footer section -->
  <footer>Copyright © 2016 Nikar</footer>

</div>

Answer 1

EDITED:

So without having to have it as a fixed position you can use flexbox.

Here is what I done:

.flex-container {
        display: -webkit-flex;
        display: flex;
        width: 100%;
    }

    .flex-item1 {
        width: 25%;
        margin: 10px;
    }

    .flex-item {
        width: 75%;
        margin: 10px;
    }

then the HTML:

<div class="flex-container">
    <div class="flex-item1">
        <img src="http://www.placehold.it/400x500" alt="" />
    </div>
    <div class="flex-item">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque dui eget arcu aliquam, eu eleifend est feugiat. In ac purus a mi suscipit congue et eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Proin at aliquam odio. Suspendisse dapibus imperdiet fringilla. Proin pulvinar luctus orci. Sed ut eros condimentum, pretium neque eu, finibus nunc. Vestibulum bibendum condimentum cursus. Nulla id nibh at nisi venenatis egestas vitae sed arcu.
            Maecenas posuere tempor semper. Curabitur eu pulvinar sem, in cursus nisi. Morbi semper, lacus in euismod accumsan, diam felis fermentum urna, quis viverra risus sapien sed nisi. Integer ac convallis nunc, eu gravida metus. Ut et consequat purus.
            Morbi volutpat placerat erat, nec facilisis dolor aliquet quis. Aliquam urna tortor, tempor in justo nec, vehicula vestibulum augue.
        </p>
    </div>
</div>

This keeps the footer at the bottom of the page.