tasteslikelemons tasteslikelemons - 4 months ago 22
CSS Question

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.


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


.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.


Inline block renders differently with no content, try adding

vertical-align: bottom;

or use float

// display:inline-block;

Or you can try to use flexboxes.