CODEWITHSUNDEEP
css
dyeje
dyeje

Reputation: 305

How to ignore element height without float?

Alright, so we have this markup:

<div class="die-control">
  <div class="symbol yellow"></div>
  <label for="yellow">yellow</label>
  <a class="quantity-control up" href="#">+</a>
  <input name="yellow">
  <a class="quantity-control down" href="#">-</a>
</div>

<div class="die-control">
  <div class="symbol green"></div>
  <label for="green">green</label>
  <a class="quantity-control up" href="#">+</a>
  <input name="green">
  <a class="quantity-control down" href="#">-</a>
</div>

And this CSS:

.die-control {
   width: calc(100% / 3);
   float: left;
   margin-bottom: 10px;
}

.symbol.yellow {
  display: inline-block;
  position: relative;
  left: -7px;
  width: 30px;
  height: 18px;
  top: 5px;
  background-color: #E9D23F;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.symbol.yellow::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  top: -10px;
  border-bottom: 10px solid #E9D23F;
}

.symbol.green {
  display: inline-block;
  position: relative;
  left: -7px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-bottom: 20px solid #4F6441;
  top: -5px;
}

.symbol.green::after {
   content: '';
   position: absolute;
   left: -15px;
   top: 20px;
   width: 0;
   height: 0;
   border: 15px solid transparent;
   border-top: 20px solid #4F6441;
 }

The symbol classes are different heights. So when the the .control elements are placed side by side, the input elements are not aligned horizontally. If I make the the .symbol elements float: left;, then their height is ignored and the input elements are aligned. But, I don't want them to float left.

Is there a way to achieve that effect without floating the symbols?

Upvotes: 0

Views: 3233

Answers (2)

Johannes
Johannes

Reputation: 67768

Add display: inline-block; to .die-control and erase the float:left in its rule:

http://codepen.io/anon/pen/XMKGrB

Upvotes: 2

kalit
kalit

Reputation: 266

I'm not sure but try use display: inline

Upvotes: 0

Related Questions