Text is moving div down

May 11, 2022

when I add text to this div, it moves down. I searched around for a solution but haven’t gotten one to work. Im wanting the moving div to stay next to the one on the left.

Before Text

After Text

HTML:

<div class="pickercont">
  <div class="colordisplay">
    <div class="colord"></div>
    <div class="stroked"></div>
  </div>
  <div class="colorpickercont">
    <div class="colorselector">
      <h6>R</h6> <!-- This text -->
    </div>
  </div>
</div>

CSS:

.pickercont{
  background-color:green;
  width:calc(100% - 8px);
  height:200px;
}

.colordisplay{
  width:62px;
  height:62px;
  padding:10px 0px 0px 10px;
  background-color:black;
  display:inline-block;
}

.colord{
  position:relative;
  width:33px;
  height:33px;
  background-color:salmon;
  z-index:11;
  border:1px solid #333;
}

.stroked{
  position:relative;
  top:-17px;
  right:-17px;
  width:33px;
  height:33px;
  background-color:white;
  z-index:10;
  border:1px solid #333;
}

.colorpickercont{
  background-color:salmon;
  width:316px;
  height:72px;
  display:inline-block;
  position:relative;
}

>Solution :

Initially the <h6> has got zero height.

And since you have used display: inline-block, the problem is with the vertical alignment as expected.

So if you could give one extra rule for both .colordisplay and .colorpickercont as vertical-align: top or vertical-align: middle, it will fix it.

.pickercont {
  background-color: green;
  width: calc(100% - 8px);
  height: 200px;
}

.colordisplay {
  width: 62px;
  height: 62px;
  padding: 10px 0px 0px 10px;
  background-color: black;
  display: inline-block;
}

.colord {
  position: relative;
  width: 33px;
  height: 33px;
  background-color: salmon;
  z-index: 11;
  border: 1px solid #333;
}

.stroked {
  position: relative;
  top: -17px;
  right: -17px;
  width: 33px;
  height: 33px;
  background-color: white;
  z-index: 10;
  border: 1px solid #333;
}

.colorpickercont {
  background-color: salmon;
  width: 316px;
  height: 72px;
  display: inline-block;
  position: relative;
}

.colordisplay,
.colorpickercont {
  vertical-align: middle;
}

<div class="pickercont">
  <div class="colordisplay">
    <div class="colord"></div>
    <div class="stroked"></div>
  </div>
  <div class="colorpickercont">
    <div class="colorselector">
      <h6>R or Whatever</h6>
      <!-- This text -->
    </div>
  </div>
</div>

Preview!