CODEWITHSUNDEEP
htmlcssinputheight
prestondoris
prestondoris

Reputation: 329

Input and Div Matching Heights

I am trying to get the height and width of a Div to match the height and width of an Input field.

Here is the jsfiddle: https://jsfiddle.net/1kv70eg1/

#outerDivOne, #outerDivTwo {
  height: 4em;
  width: 20em;
  border:solid blue 1px;
}
#onTop, #needSameWidth {
  text-align: center;
  border: solid #333333 1px;
  font-size: .9em;
  width: 5em;
  height: 2em;
  border-radius: 3%;
  background-color: whitesmoke;
  vertical-align: center;
}

#onRight, #needSameHeight {
  display:inline-block;
  text-align: center;
  border: solid #333333 1px;
  font-size: .9em;
  width: 5em;
  height: 2em;
  border-radius: 3%;
  background-color: whitesmoke;
  vertical-align: center;
  float: left;
}
<div id='outerDivOne'>
  <input type='text' id='onTop' placeholder='whatever'/>
  <div id="needSameWidth"><output>Test</output></div>
</div>

<div id='outerDivTwo'>
  <input type='text' id='onRight' placeholder='whatever'/>
  <div id="needSameHeight"><output>Test</output></div>
</div>

Upvotes: 2

Views: 365

Answers (2)

SimpleBeat
SimpleBeat

Reputation: 755

You'd need to provide explicit values for margin and padding. In your case they are default (non-zero), which skews your layout.

#outerDivOne, #outerDivTwo {
  height: 4em;
  width: 20em;
  border:solid blue 1px;
}

#onTop, #needSameWidth {
  text-align: center;
  border: solid #333333 1px;
  font-size: .9em;
  width: 5em;
  height: 2em;
  border-radius: 3%;
  background-color: whitesmoke;
  vertical-align: center;
  padding: 0em;
  margin: 0em;
}

#onRight, #needSameHeight {
  display:inline-block;
  text-align: center;
  border: solid #333333 1px;
  font-size: .9em;
  width: 5em;
  height: 2em;
  border-radius: 3%;
  background-color: whitesmoke;
  vertical-align: center;
  float: left;
  padding: 0em;
  margin: 0em;
}
<div id='outerDivOne'>
  <input type='text' id='onTop' placeholder='whatever'/>
  <div id="needSameWidth"><output>Test</output></div>
</div>

<div id='outerDivTwo'>
  <input type='text' id='onRight' placeholder='whatever'/>
  <div id="needSameHeight"><output>Test</output></div>
</div>

I'd also recommend checking out the CSS Reset approach to reduce such annoyances: https://meyerweb.com/eric/tools/css/reset/

Upvotes: 3

FKEinternet
FKEinternet

Reputation: 1060

I haven't done any experiments, but I see neither of your rulesets have margin or padding settings. I'd look at those.

Upvotes: 2

Related Questions