Contact form and footer styling issues

Question

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>

score 0 · Answer 1 · answered Feb 16 '19 at 11:33

0

Set float:left to .col.

.col {
    float: left;
}

And also add a width: 100%; to the last .col which contains the footer.

answered Feb 16 '19 at 11:33

David Simon

195
2
12

Cheers man, I'll upvote this shortly. But could you tell me why adding `float: left` fixed the styling issue? – user172127 Feb 16 '19 at 11:36
@user172127 you don't need to add more float, you need to clear the float or use better techniques to create this layout (read the duplicate) – Temani Afif Feb 16 '19 at 11:39

Contact form and footer styling issues

1 Answers1