CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

CSS DIVs alignment issue

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/

enter image description here

.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&nbsp;</button>
    </form>
  </div>
</footer>

Upvotes: 0

Views: 54

Answers (3)

brovalex
brovalex

Reputation: 21

It's an issue with your floating elements. If you want to use float left and right, you will need to put the element before the two 's: 

<footer class="_container footer clearfix">
  <div class="footer-top-bar clearfix"></div>
  <div class="footer-content clearfix">
    <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&nbsp;</button>
    </form>
    <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>
  </div>
</footer>

You may still have trouble aligning elements with this code, e.g. the div.facebook-container will be misaligned. You may want to nest the elements into their own elements, at which point you may not need the floats at all.

Upvotes: 1

Oriol
Oriol

Reputation: 288680

Change your layout to

<div class="footer-content clearfix">
  <form class="clearfix" id="contactfrm" method="post" name="contactfrm"></form>
  <div class="footer-box footer-box-1 clearfix"></div>
  <div class="facebook-container">facebookbutton</div>
</div>

And remove

.facebook-container {
  clear: both;
}


.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;
  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>
    <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&nbsp;</button>
    </form>
    <div class="facebook-container">facebookbutton</div>
  </div>
</footer>

Upvotes: 1

pavel
pavel

Reputation: 27092

You have to wrap right-floated elements and float them together.

<footer class="_container footer clearfix">
    <div class="footer-top-bar clearfix"></div>
    <div class="footer-content clearfix">

        <div id="right">    <!-- this was added -->
            <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>
        </div> <!-- this was added -->

        <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&nbsp;</button></form>
    </div>
</footer>

And CSS

#right {float: right; overflow: hidden}

Working fiddle: http://jsfiddle.net/yprtrLk8/1/

Upvotes: 1

Related Questions