Contact form and footer styling issues [duplicate] - html

Question

This question already has answers here:
What is a clearfix?
(10 answers)
Closed 4 years ago.
I have some styling issues with my contact form and footer: I want a border-top at the top for the footer div to separate the contact form and footer. However, the border-top of the footer is pushed above the top of the contact form rather than the top of the footer
If I delete the contact form, the border-top is where it needs to be... I've attached an image (as the code snippet doesn't do my styling so far any justice)
#contact-text-title {
color: #5CDB95;
}
.left-grid, .right-grid {
width: 49%;
float: left;
margin-top: -2%;
}
.left-grid {
margin-right: 1%;
}
.right-grid {
margin-left: 1%;
}
#mobile-contact-content {
display: none;
}
form {
width: 98%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 18px;
font-family: Karla;
}
input, textarea {
display: block;
width: 100%;
border: 1px solid black;
padding: .5rem;
font-family: Montserrat;
font-weight: 300;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Montserrat;
font-size: 18px;
border: 1px solid #379683;
padding:.5rem;
width: auto;
margin-top: 15px;
background-color: #379683;
color: #FFF;
}
button:hover {
cursor: pointer;
color: #379683;
border-color: #379683;
background-color: #FFF;
}
#contact-text {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 48px;
height: 500px;
}
footer {
font-size: 12px !important;
height: 25px;
}
footer p {
border-top: 1px solid black;
}
footer .logo {
font-size: 18px !important;
border: 0px solid black;
text-align: left;
width: 50%;
float: left;
margin-bottom:30px;
}
footer #facebook {
font-size: 18px !important;
text-align: left;
width: 50%;
float: left;
margin-bottom:30px;
margin-top:17px;
color: #05386B;
}
footer #facebook:hover {
cursor: pointer;
}
<div class="col">
<div id="contact-block">
<div id="header">
<h4>Contact.</h4>
</div>
<div id="mobile-contact-content">
<p class="content-text">Do you have an idea for your garden or driveway?</p>
<p class="content-text"><span>We want to hear about it!</span></p>
<p class="content-text">Use the contact form to get in touch with us!</p>
</div>
<div class="left-grid">
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
</div>
<div class="right-grid" id="contact-box">
<div id="contact-text">
<p><span id="contact-text-title">Have a new project idea?</span>
<br>Use the contact form to tell us about it and we will get in touch with you</p>
</div>
</div>
</div>
</div>
<div class="col">
<footer>
<p><span class="logo" style="text-align:left;">Rob Moore LTD</span><span id="facebook" style="text-align:right;"><i class="fab fa-facebook-f fa-lg"></i></span>
</p>
</footer>
</div>

Answer 1

Set float:left to .col.
.col {
float: left;
}
And also add a width: 100%; to the last .col which contains the footer.