Prevent footer from overlapping combining with float - html

Question

I have created a bubble conversation html.
Now I am trying to add a footer to it.
(Footer similar code in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer)
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
width: 80%;
background: #eee;
}
.him {
float: left;
border: 1px solid #000000;
}
.me {
float: right;
}
#footer {
height: 30px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
But I am not seeing the last lines of the conversation. The problem is that the footer is overlaping them because of the float property of the < li > elements.
How can I avoid it?

Answer 1

check this out: css grid is a very good property of css.
we can divide screen into number of columns and rows . i used here css-grid.
for more info on css-grid read
https://css-tricks.com/snippets/css/complete-guide-grid/
ul {
list-style: none;
margin: 0;
padding: 0;
display:grid;
grid-template-columns:33% 33% 34%;
}
ul li {
display: block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
background: #eee;
}
.him {
grid-column:1/3;
border: 1px solid #000000;
}
.me {
grid-column:2/4
}
#footer {
height: 30px;
position: fixed;
bottom:0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>

Answer 2

Due to padding-bottom could not be applied here, my answer didn't fit in the case, therefore I've done a research on the alternatives for a grid layout proposed and, surprisingly, for the fixed positioning of the footer block.
In this example I've decided to leave the code without the <ul> which has quite a big list of default element css values. I supposed that the first message always comes from the user, and used :not() CSS selector to style the replies blocks. You can change .user and :not(user) to any classes like .me and .him according to your HTML.
section {display:flex;flex-direction:column}
section * {
width: 75%;
border: 1px solid #757575;
border-radius:20px;
padding:2px 10px;
margin-bottom:2px
}
.user {
background:#ccc;
margin-left: auto
}
section :not(.user) {
background:#eee
}
section :not(.user) + .user, .user + :not(.user) {
margin-top:5px
}
footer {
height: 30px;
position: sticky; /* Yes. It works now */
bottom: 0;
background: #000;
color: white;
text-align: center;
line-height: 28px
}
<section>
<div class="user">Need some help with HTML</div>
<div class="user">And CSS maybe</div>
<div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
<div>Sure</div>
<div>Lets test this one</div>
<div>Quite a good in terms of browser support in 2019</div>
<div class="user">Awsome!</div>
<div class="user">Thank you so much</div>
<div>You are welcome</div>
<div class="user">Goodbye</div>
</section>
<footer>
<p>Sticky Footer</p>
</footer>