CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
zjk
zjk

Reputation: 2163

Why is `<input />` dragging down the parent div?

The input element seems to drag down the parent div. Why is this happening? How can I fix it?

The html

  <div class="main">
    <div class="one">
    </div>
    <div class="two">
      <input type="text" /> <!-- Without this input, the page looks fine -->
    </div>
    <div class="three">
    </div>
  </div>

The css

.main>div {
  display: inline-block;
  height: 330px;
}

.one {
  width: 18%;
  background-color: #fbfbfb;
}

.two {
  margin-left:10px;
  width: 50%;
  border: 2px solid #ddd;
}

.three {
  margin-left: 10px;
  width: 20%;
  background-color: #bbb;
  border: 5px dashed #ddd;
}

Here is the effect: http://jsbin.com/gubozapove/edit?output

Upvotes: 0

Views: 48

Answers (3)

connexo
connexo

Reputation: 56754

Add

vertical-align: text-top;

to your .main>div.

Upvotes: 1

AleshaOleg
AleshaOleg

Reputation: 2201

You can fix it adding float: left; to .one and .two

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

It is because you have given: display: inline-block;. To work around this, give:

vertical-align: top;

Preview

Reason: Inline Block elements tend to align to the baseline by default.

Fiddle: http://jsbin.com/kitazeweqi/1/edit?output

Upvotes: 5

Related Questions