How to bottom vertical align two divs with different font sizes in in a container div

Question

I need the Invoice text to be left aligned and the Invoice # to be right aligned. I want them both to also be bottom aligned otherwise it looks odd with the an underline below. I have the following html:

<div style="height:75px; line-height:75px;">
    <div class="invoiceTitle">Invoice</div>
    <div class="invoiceNumber"># 12</div>
</div>

with the following CSS:

.invoiceTitle
{
    float: left;
    font-size: 36px;
    vertical-align: bottom;
}

.invoiceNumber
{
    float: right;
    font-size: 16px;
    vertical-align: bottom;
}

I can't figure out how to get them both aligned vertically together. There's extra code in there to show things I've tried unsuccessfully.

When you use `vertical-align` you should add `display:table-cell` — Koby Douek, Nov 19 '17 at 06:50
`vertical-align` doens't work on `display:inline`, which is the default. Try adding the `display:table-cell` attribute. — Koby Douek, Nov 19 '17 at 06:52
@Stephane can you please show any example link or image so we can clearly get the idea what you need. — msz, Nov 19 '17 at 06:52
@msz I just want the invoiceTitle div to appear on the left and the InvoiceNumber div to appear on right at the same level vertically. — Stephane Grenier, Nov 19 '17 at 06:54
@KobyDouek - Your answer makes more sense. I believe you needed to also add width. — Stephane Grenier, Nov 19 '17 at 06:56
@StephaneGrenier, why would you make them `float`s if you want vertical align bottom? I mean what is your model? — user10089632, Nov 19 '17 at 07:15
@user10089632 It's just me trying different things to show my best attempt is all. — Stephane Grenier, Nov 19 '17 at 07:34

felixmosh · Accepted Answer · 2017-11-19T07:03:04.440

2

vertical-align: bottom; works only on inline blocks, whenever you used floats it moved to other Block formatting context. You can achieve that with flexbox & align-items: flex-end;

.container {
  height: 75px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
  align-items: flex-end;
}

.invoiceTitle {
  flex: 1;
  font-size: 36px;
}

.invoiceNumber {
  font-size: 16px;
  flex: 1;
  text-align: right;
}

<div class="container">
  <div class="invoiceTitle">Invoice</div>
  <div class="invoiceNumber"># 12</div>
</div>

edited Nov 19 '17 at 07:03

answered Nov 19 '17 at 06:54

felixmosh

32,615
9
69
88

Those are not both bottom aligned – user10089632 Nov 19 '17 at 06:57
They are aligned to the base line of each other. – felixmosh Nov 19 '17 at 06:57
Updated the example – felixmosh Nov 19 '17 at 07:03

user10089632 · Answer 2 · 2017-11-19T13:54:26.373

I've made it with relative/absolute positioning I prefer using inline-block instead of float Scroll down to see

.container
{
    font-size: 36px;
    position:relative;
}
.invoiceTitle, .invoiceNumber{
   display:inline-block;
   position:absolute;
   bottom:0;
}
.invoiceNumber{
 right:0;
    font-size: 16px;
}

  <div class="container">
    <div class="container" style="height:750px; line-height:75px;">
        <div class="invoiceTitle">Invoice</div>
        <div class="invoiceNumber"># 12</div>
    </div

How to bottom vertical align two divs with different font sizes in in a container div

2 Answers2