CSS static footer and div float issue [duplicate] - html

Question

This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
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>