Having trobule getting two DIVs to vertically align

Question

I have two DIVs

<div class=“address”>
    <div class="field"><input placeholder="City" class="textField" type="text" name="user[address][city]" id="user_address_city"></div>

    <div class="select"><select class="selectField selectMenu form-control select-hidden" name="user[address][state]" id="user_address_state"><option   value="">Select State</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option></select><div class="select-styled">Select State</div><ul class="select-options"><li rel="">Select State</li><li rel="AL">Alabama</li><li rel="WY">Wyoming</li></ul></div>
</div>

The problem I’m having is aligning both DIVs on the same vertical plain. Per this Fiddle — https://jsfiddle.net/7e0jthv1/ , the select menu is aligning at a higher vertical position than the other text field. This is the style I have for my input element

input {
  font-size: 16px;
  line-height: 18px;
  box-sizing: border-box;
  font-family: inherit;
  padding: 0.4rem 0;
  text-indent: 0.8rem;
  border: none;
  outline: none;
  margin: 0;
  background-color: transparent;
}

and this is the style for the DIV containing the select menu …

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 40px;
}

I can’t figure out why things aren’t aligning at the top.

Possible duplicate of [My inline-block elements are not lining up properly](http://stackoverflow.com/questions/19366401/my-inline-block-elements-are-not-lining-up-properly) — TylerH, Jul 08 '16 at 15:14

score 2 · Accepted Answer · edited May 23 '17 at 12:16

You need to add vertical-align to your .select and .field containers.

You can do something like this and it will make the elements line up correctly:

.select, .field {vertical-align:top;}

https://jsfiddle.net/p40jeq9L/

EDIT: This is due to the fact that the elements are inline-block. The accepted answer in this post explains the reasons why pretty well: My inline-block elements are not lining up properly

Mirko Cianfarani · Answer 2 · 2016-07-08T15:04:24.963

0

Just add property CSS width.

So add width:100% to divs class="select" and class="field". jsfiddle

edited Jul 08 '16 at 15:04

answered Jul 08 '16 at 14:58

Mirko Cianfarani

2,023
1
23
39

he meant to put both elements side to side at the same level – derloopkat Jul 08 '16 at 15:15

score 0 · Answer 3 · answered Jul 08 '16 at 15:05

You can do it using display: table, table-cell :

HTML :

<div class="profileField address">
    <label for="user_address_address">Hometown</label><br>
    <div class="fields-container">
    <div class="field"><input placeholder="City" class="textField" type="text" name="user[address][city]" id="user_address_city"></div>
    <div class="select">
<select class="selectField selectMenu form-control select-hidden" name="user[address][state]" id="user_address_state">
<option value="">Select State</option>

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
 ...
</select>
 <div class="select-styled">Select State</div><ul class="select-options"><li rel="">Select State</li><li rel="AL">Alabama</li><li rel="AK">Alaska</li><li rel="AZ">Arizona</li><li rel="AR">Arkansas</li><li rel="CA">California</li><li rel="CO">Colorado</li><li rel="CT">Connecticut</li><li rel="DE">Delaware</li><li rel="DC">District of Columbia</li><li rel="FL">Florida</li><li rel="GA">Georgia</li><li rel="HI">Hawaii</li><li rel="ID">Idaho</li><li rel="IL">Illinois</li><li rel="IN">Indiana</li><li rel="IA">Iowa</li><li rel="KS">Kansas</li><li rel="KY">Kentucky</li><li rel="LA">Louisiana</li><li rel="ME">Maine</li><li rel="MD">Maryland</li><li rel="MA">Massachusetts</li><li rel="MI">Michigan</li><li rel="MN">Minnesota</li><li rel="MS">Mississippi</li><li rel="MO">Missouri</li><li rel="MT">Montana</li><li rel="NE">Nebraska</li><li rel="NV">Nevada</li><li rel="NH">New Hampshire</li><li rel="NJ">New Jersey</li><li rel="NM">New Mexico</li><li rel="NY">New York</li><li rel="NC">North Carolina</li><li rel="ND">North Dakota</li><li rel="OH">Ohio</li><li rel="OK">Oklahoma</li><li rel="OR">Oregon</li><li rel="PA">Pennsylvania</li><li rel="PR">Puerto Rico</li><li rel="RI">Rhode Island</li><li rel="SC">South Carolina</li><li rel="SD">South Dakota</li><li rel="TN">Tennessee</li><li rel="TX">Texas</li><li rel="UT">Utah</li><li rel="VT">Vermont</li><li rel="VA">Virginia</li><li rel="WA">Washington</li><li rel="WV">West Virginia</li><li rel="WI">Wisconsin</li><li rel="WY">Wyoming</li></ul></div>
  </div>
  </div>

CSS :

 @import url("http://fonts.googleapis.com/css?family=Lato");

.profileField {
  padding: 10px;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.profileField label {
      margin-bottom: 10px;
    float: left;
    width: 100%;
}

.field {
  border: 1px solid rgba(74, 74, 76, 0.5) !important;
      float: none;
    display: table-cell;
    margin: 15px;
}

input {
  font-size: 16px;
  line-height: 18px;
  box-sizing: border-box;
  font-family: inherit;
  padding: 0.4rem 0;
  text-indent: 0.8rem;
  border: none;
  outline: none;
  margin: 0;
  background-color: transparent;
}

.address {
  display: inline-block;
}


.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 40px;
  display: table-cell;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 15px;
  background-color: #c0392b;
  padding: 8px 15px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}

.select-styled:hover {
  background-color: #b83729;
}

.select-styled:active, .select-styled.active {
  background-color: #ab3326;
}

.select-styled:active:after, .select-styled.active:after {
  top: 0px;
  border-color: transparent transparent #fff transparent;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ab3326;
}

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #962d22;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li:hover {
  color: #c0392b;
  background: #fff;
}

.select-options li[rel="hide"] {
  display: none;
}

.fields-container {
display: table;
}

FIDDLE

Having trobule getting two DIVs to vertically align

3 Answers3