title: layout issues - footer colliding with picture
body: <p><a href="https://i.stack.imgur.com/eFev3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eFev3.png" alt="enter image description here"></a></p>
  
  <p>I originally thought this issue was bootstrap related because before my front end left he said he used bootstrap but float clear doesn't seem to be fixing it or im just lost. It turns out that it </p>
  
  <p>here is the css </p>
  
  <pre><code>     .container {
      position: relative;
      max-width: 1200px;
    }
    .content-overlap {
      background: rgb(245, 244, 239);
      width: 40%;
      position: absolute;
      top: 80px;
      padding: 60px;
    }
  
    .content-overlap-right {
      background: rgb(245, 244, 239);
      width: 40%;
      position: absolute;
      bottom: 80px;
      right : 0px;
      padding: 60px;
  
    }
    .content-overlap:before {
      content: "";
      border: 2px solid rgba(171, 154, 124, 1.0);
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
    }
  
    .content-overlap-right:before {
      content: "";
      border: 2px solid rgba(171, 154, 124, 1.0);
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
  
    }
    .image-overlap {
      width: 70%;
      float: right;
    }
  
    .image-overlap-left {
      width: 70%;
      float: left;
    }
    @media screen and (max-width: 480px) {
      .content-overlap {
        position: relative;
        width: 100%;
      }
      .image-overlap {
        width: 100%;
      }
  
      .content-overlap-right {
        position: relative;
        width: 100%;
      }
      .image-overlap-right {
        width: 100%;
      }
    }
  
  .footie {
      background: black;
      color: wheat;
      bottom: 0%;
      width: 100%;
  }
  </code></pre>
  
  <p>Here is the html</p>
  
  <pre><code>    `&lt;div class="container"&gt;
    &lt;div class="content-overlap"&gt;
      &lt;h2&gt;Contact Us&lt;/h2&gt;
        &lt;p&gt; For investment information call: &lt;br&gt;
          +number or +NUMBER &lt;br&gt; &lt;br&gt;
            For legal contact:+NUMBER &lt;br&gt;
            For partnership: +NUMBER &lt;br&gt;
                    &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="image-overlap"&gt;
      &lt;img src="assets\administration.jpg"  &gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>I think it might have to do with positioning but i don't know how to make it look the same. </p>
  
  <p>all i want is for the footer not to collide with the contact us text box.</p>
  
  <p>now it is asking me to add detail but i dont have much more to add. I actually asked this yesterday but I gave the wrong context since i was given the wrong context)</p>
  
  <p>The footer is supposed to be rendering as a partial at the bottom , not colliding.</p>