CODEWITHSUNDEEP
htmlcss
aicccia
aicccia

Reputation: 1

Why is my div being pushing down when p tags are added to the bottom of a sibling div?

I have two divs sitting side-by-side inside a form element. Normally, they both line up against the top of the form.

However, when I add p tags(class forget) to the bottom of the second sibling div, the first div is pushed down from the top of the form. The second div stays up against the top of the form element.

I don't understand why the p tags at the bottom of the second sibling div are adding margin/padding to the top of the first div.

One clue is that setting vertical-align: top fixes the problem, but I want to know what is causing it.

form {
  color: white;
  width: 430px;
  height: 80px;
  float: right;
  border: 1px solid black;
}

.formEmail,
.formPassword {
  border: 1px solid white;
  width: 165px;
  height: 100%;
  font-size: 13px;
  margin-right: 10px;
  display: inline-block;
}
<form id="logIn">
  <div class="formEmail">
    <p>Email or Phone</p>
    <input type="text" name="emailphone">
  </div>
  <div class="formPassword">
    <p>Password</p>
    <input type="text" name="password">
    <p class="forget">Forget Account?</p>
  </div>
</form>

Upvotes: 0

Views: 52

Answers (2)

Wim Mertens
Wim Mertens

Reputation: 1790

You need to add vertical-align: top to the two divs: https://jsfiddle.net/pobbLs21/ They're set to either baseline or middle I guess in your reset (if you're using one).

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Just add overflow:hidden; to the divs

form {
  color: white;
  width: 430px;
  height: 80px;
  float: right;
  border: 1px solid black;
}

.formEmail,
.formPassword {
  border: 1px solid white;
  width: 165px;
  height: 100%;
  font-size: 13px;
  margin-right: 10px;
  display: inline-block;
  overflow: hidden;
}
<form id="logIn">
  <div class="formEmail">
    <p>Email or Phone</p>
    <input type="text" name="emailphone">
  </div>
  <div class="formPassword">
    <p>Password</p>
    <input type="text" name="password">
    <p class="forget">Forget Account?</p>
  </div>
</form>

Upvotes: 0

Related Questions