How do you make 2 fixed footers at the bottom of the page using HTML and CSS?

Question

I have here an html page and I want to make 2 footers below the page. But my problem is the second footer is merged with the first footer. Can someone tell me a solution to this?

Here is the code for my footer:

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #787a7c;
  color: white;
  padding: 0px 0px 18px 0px;
}

.footerLinks a {
  text-decoration: none;
  color: #f2f2f2;
  font-size: 10px;
  font-family: Malgun Gothic;
}

.footerLinks a:hover {
  text-decoration: underline;
}

.lowerFooter {
  background-color: orange;
}

.footerLinks {
  float: left;
  position: relative;
}

<div class="contextSize">
  <div id="footer">
    <div class="upperFooter content">
      <nav class="footerLinks">
        <a href="#">개인정보처리방침 
                                                 </a> |
        <a href="#">이메일무단수집거부 
                                                 </a> |
        <a href="#">사이트맵</a> |
        <a href="#">찾아오시는 길</a>
      </nav>
      <h6 class="account">ADMIN
        <h6>
    </div>
    <div class="lowerFooter content">
      sample
    </div>
  </div>
</div>

when compiled, the two footers merge with each other.

Answer 1

They do not merge with each other. Try to apply a background to each of them so you can see it. You set a background to the surrounding element but not to the upper footer. See here:

 
/*CSS code snippet*/
 #footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: red; /* changed */
     color: white;
     padding: 0px 0px 18px 0px;
}
 .footerLinks a {
     text-decoration: none;
     color: #f2f2f2;
     font-size: 10px;
     font-family: Malgun Gothic;
}
 .footerLinks a:hover {
     text-decoration: underline;
}
 .lowerFooter {
     background-color: orange;
}
 .footerLinks {
     float: left;
     position: relative;
}

/* added: */
 .upperFooter {
     background: green;
}

.upperFooter,  .lowerFooter {
     padding: 10px;
     margin: 0;
}

<!-- HTML Code Snippet-->
<div class="contextSize">
    <div id="footer">
        <div class="upperFooter content">
            <nav class="footerLinks">
                <a href="#">개인정보처리방침 
                                             </a> |
                <a href="#">이메일무단수집거부 
                                             </a> |
                <a href="#">사이트맵</a> |
                <a href="#">찾아오시는 길</a>
            </nav>
            <h6 class="account">ADMIN</h6>
        </div>
        <div class="lowerFooter content">
            sample
        </div>
    </div>
</div>

Another hint: your closing </h6> had no / in it as well.