I'd like the form on the left to be at the same level vertically as the green DIV o the right. Unfortunately the form starts at the bottom of the green DIV. Hoz could I fix this? Many thanks for your help.
See http://jsfiddle.net/yprtrLk8/
.footer { padding-bottom: 27px; background-color: #fff; } .footer-box-1 { position: relative; float: right; width: 300px; height: auto; /* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center, circle farthest-corner, #B2CF44 0%, #9DB53C 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(center, circle farthest-corner, #B2CF44 0%, #9DB53C 100%); /* Opera */ background-image: -o-radial-gradient(center, circle farthest-corner, #B2CF44 0%, #9DB53C 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center center, 0, center center, 498, color-stop(0, #B2CF44), color-stop(1, #9DB53C)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center, circle farthest-corner, #B2CF44 0%, #9DB53C 100%); /* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle farthest-corner at center, #B2CF44 0%, #9DB53C 100%); /*box-shadow: 0 2px 5px rgba(0, 0, 0, .5);*/ } .footer-box-1:after { right: 100%; top: 30%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(71, 64, 50, 0); border-right-color: #9DB53C; border-width: 16px; margin-top: -32px; } .footer-box .footer-box { float: left; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; font-size: 16px; line-height: 1.38; color: #ffffff; } .footer-content { position: relative; margin-right: auto; margin-left: auto; height: auto; clear: both; z-index: 9; max-width: 700px; /*background: red;*/ margin-top: 40px; } .facebook-container { width: 300px; background: red; margin-top: 50px; float: right; position: relative; clear: both; text-align: center; margin-left: auto; margin-right: auto; } form { position: relative; float: left; } ._input, textarea { display: block; float: left; clear: both; width: 300px; height: 33px; padding-right: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(212, 209, 198); border-right-color: rgb(212, 209, 198); border-bottom-color: rgb(212, 209, 198); border-left-color: rgb(212, 209, 198); border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-color: rgb(242, 242, 242); line-height: 1.38; color: #aba6a6; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; animation-direction: alternate; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; -o-animation-direction: alternate; } form input:focus, form textarea:focus { border: 1px solid #b9e22d; } textarea { height: 150px; margin-top: 16px; } .footer-content ._input-1 { position: relative; z-index: 5; } .footer-content ._input-2 { margin-top: 15px; } .footer-content ._input-3 { margin-top: 16px; } ._button { display: block; float: right; clear: both; width: 120px; height: 36px; margin-top: 14px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: #B2CF44; font-weight: 400; line-height: 1.38; text-align: center; color: #fff; font-size: 14px; }<footer class="_container footer clearfix"> <div class="footer-top-bar clearfix"></div> <div class="footer-content clearfix"> <div class="footer-box footer-box-1 clearfix"> <p class="footer-box">Vous souhaitez <b>recevoir plus d'information</b> ou bien <b>prendre rendez-vous</b>? N'hésitez pas à me contacter par e-mail en utilisant le <b>formulaire de contact</b>, ou par téléphone au <b>+352 123 456</b>. <br>A bientôt!</p> </div> <div class="facebook-container">facebookbutton</div> <form class="clearfix" id="contactfrm" method="post" name="contactfrm"> <input class="_input _input-1" id="name" name="name" placeholder="Votre Prénom & Nom" type="text"> <input class="_input _input-2" id="email" name="email" placeholder="Email" type="email"> <textarea class="floatlabel" id="message" name="message" placeholder="Votre message"></textarea> <button class="_button" name="submit" type="submit" value="Envoyer"><i class="fa fa-sign-in"></i> ENVOYER </button> </form> </div> </footer>
