CODEWITHSUNDEEP
htmlcss
tasteslikelemons
tasteslikelemons

Reputation: 397

Prevent an input from pushing a containing div below others in the same row

I'm trying to design an element that is usually just a div displaying text, but which becomes an editable text input when clicked. However, when I put a row of these together, any that are displaying the input get pushed below the level of the others for some reason.

I created a minimal example of this on codepen: http://codepen.io/anon/pen/XjZNdZ

In the interest of simplicity I removed the interactivity and just showed an example of the situation I want to avoid: the middle div should not be pushed below the level of the other two divs.

HTML:

<div class="input-cell">
  <span></span>
</div>
<div class="input-cell">
  <input type="text">
</div>
<div class="input-cell">
  <span></span>
</div>

CSS:

.input-cell {
  border: 2px solid black;
  height: 30px;
  display: inline-block;
  width: 90px;
}

input {
  width: 60px;
}

Note that specifying the height and widths of the containing divs is a requirement; I want them to fit in a regular table-like layout.

Upvotes: 2

Views: 30

Answers (1)

knutesten
knutesten

Reputation: 594

Inline block renders differently with no content, try adding

vertical-align: bottom;

or use float

// display:inline-block;
float:left;

Or you can try to use flexboxes.

Upvotes: 2

Related Questions