kaska3er kaska3er - 7 months ago 11
HTML Question

How to align vertically and float to right in <div>?

I made this code:

<style>
.left-cell {
display:table-cell;
vertical-align:middle;
}
.right-cell {
display:table-cell;
vertical-align:middle;
text-align:right;
}
</style>
<div class=""style="border: 3px dashed #ccc;width:290px;padding: 10px;">
<h4 style="text-align:center;">8$ taniej!</h4>
<div class="left-cell">
Skopiuj kupon: 
</div>
<div class="right-cell">
<button data-toggle="tooltip" data-clipboard-text="CEBULAREDMI3PRO" class="kupony button" type="button" style="font-weight:bold;">CEBULAREDMI3PRO</button>
</div><br/>
<div class="left-cell">
Przedmiot:
</div>
<div class="right-cell">
<a href="x.pl"><button class="button" type="button" style="font-weight:bold;">Xiaomi Redmi 3 Pro</button></a>
</div>
</div>


It looks that: press here
My question is how can I float buttons to right to get good-looking box?

Answer

Set the left-cell to width:100%and the buttons to white-space:nowrap

.left-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.right-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.button {
  white-space: nowrap;
}
<div class="" style="border: 3px dashed #ccc;width:290px;padding: 10px;">
  <h4 style="text-align:center;">8$ taniej!</h4>
  <div class="left-cell">
    Skopiuj kupon:
  </div>
  <div class="right-cell">
    <button data-toggle="tooltip" data-clipboard-text="CEBULAREDMI3PRO" class="kupony button" type="button" style="font-weight:bold;">CEBULAREDMI3PRO</button>
  </div>
  <br/>
  <div class="left-cell">
    Przedmiot:
  </div>
  <div class="right-cell">
    <a href="x.pl">
      <button class="button" type="button" style="font-weight:bold;">Xiaomi Redmi 3 Pro</button>
    </a>
  </div>
</div>