CSS static footer and div float issue

Question

I'm creating a simple chat app with Bootstrap 4 and I'm having difficulty with a static footer. The messages are getting hidden behind the footer. How can I make it so that the messages do not get put underneath the input box/footer?

.content {
    margin-bottom: 100px;
}

.message {
    float: left;
    padding: 10px;
    border-radius: 17px;
    background: #e8e8f8;
    margin: 13px 11px 0 11px;
    clear: both;
}

.my-message {
    float: right;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
}

.input-form {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
    <nav class="navbar navbar-dark bg-dark blue fixed-top">
        <span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
    </nav>
    <div class="container" style="padding-top: 85px;">
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
    </div>
</div>
<div class="footer">
    <form class="input-form">
        <div>
            Please wait for a user to join ...
        </div>

        <div class="input-group mb-1 px-2">
            <input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
            <div class="input-group-append">
                <button class="btn btn-success" type="submit" id="sendmessage">Send</button>
            </div>
        </div>
    </form>
</div>

Answer 1

The problem is your .messages are floating, so you need to clear them on the the .content container. I added an ::after element to clear, and padding instead of margin to the .content container.

.content {
  padding-bottom: 100px;
}

.content::after {
  content: '';
  display: block;
  clear: both;
}

.message {
  float: left;
  padding: 10px;
  border-radius: 17px;
  background: #e8e8f8;
  margin: 13px 11px 0 11px;
  clear: both;
}

.my-message {
  float: right;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
}

.input-form {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="content">
  <nav class="navbar navbar-dark bg-dark blue fixed-top">
    <span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
  </nav>
  <div class="container" style="padding-top: 85px;">
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="footer">
  <form class="input-form">
    <div>
      Please wait for a user to join ...
    </div>

    <div class="input-group mb-1 px-2">
      <input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
      <div class="input-group-append">
        <button class="btn btn-success" type="submit" id="sendmessage">Send</button>
      </div>
    </div>
  </form>
</div>

Answer 2

You can also try this with flex :

.content {
    margin-bottom: 100px;
}
.container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: flex-start;
    flex-direction: column;
}

.message {
    padding: 10px;
    border-radius: 17px;
    background: #e8e8f8;
    margin: 13px 11px 0 11px;
}

.my-message {
    align-self: flex-end;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
}

.input-form {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
    <nav class="navbar navbar-dark bg-dark blue fixed-top">
        <span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
    </nav>
    <div class="container" style="padding-top: 85px;">
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
    </div>
</div>
<div class="footer">
    <form class="input-form">
        <div>
            Please wait for a user to join ...
        </div>

        <div class="input-group mb-1 px-2">
            <input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
            <div class="input-group-append">
                <button class="btn btn-success" type="submit" id="sendmessage">Send</button>
            </div>
        </div>
    </form>
</div>