How to fit text at the bottom inside a div element?

Question

I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box. How can I make it align at the bottom of the page, with correct padding?

Here's the HTML & CSS file:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
  background-color: #202020;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
}

#list {
  width: 70%;
  height: 250px;
  padding: 10px;
  overflow: auto;
  background-color: #303030;
  color: white;
}

.currency {
  background-color: #202020;
  height: 20%;
  color: white;
}

.currency-flag {
  float: left;
  padding: 5px;
}

.currency-name {
  text-align: left;
  font-size: 120%;
  /* padding-top: 5px; */
}

.currency-value {
  text-align: left;
  font-size: 50%;
}

<center>
  <div id="list">
    <div class="currency">
      <img class="currency-flag" src="flags/eur.svg"></img>
      <p class="currency-name">European Euro</p>
      <p class="currency-value">1 R$ = 2 EUR</p>
    </div>
  </div>
</center>

Don't use the [deprecated ``](https://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html) Use CSS instead. — Roko C. Buljan, Feb 26 '22 at 10:44
`` is a void Element (like `
` etc) and does not have a closing `` tag — Roko C. Buljan, Feb 26 '22 at 10:47
You didn't explain how should the end result look like. Terms like *"fix"*?, *"bottom"*?, *"footer"*?, *"outside"*? - can be all interpreted in many ways. Please, be specific, add an image of the desired - if nothing else. — Roko C. Buljan, Feb 26 '22 at 11:06
@ash your comment looks as though it should be in a separate question of your own. — A Haworth, Feb 26 '22 at 11:08
Could you explain which of the p elements is the footer, or do they between them make up the footer? — A Haworth, Feb 26 '22 at 11:08
@AHaworth `currency-value` is supposed to be the footer, that's supposed to stick to the bottom of the div element @RokoC.Buljan by "fit" i mean stick onto the bottom (that is, the vertical bottom part of the "currency" div). the footer is a "currency-value" `
` tag and by outside i mean not in the "currency" div box — bemxio, Feb 26 '22 at 11:24

score 1 · Accepted Answer · answered Feb 26 '22 at 11:37

1

The problem is that you have set fixed height to .currency insted of height:20% use height:auto;

 .currency {
        background-color: #202020;
        height: auto;
        color: white;
      }

to fixed it at botton use positions like

    #list {
        width: 70%;
        height: 250px;
        padding: 10px;
        overflow: auto;
        background-color: #303030;
        color: white;
        position: absolute;
        bottom: 0;
      }

answered Feb 26 '22 at 11:37

M Atif Mehmood

181
2
12

is it possible to fit the text without expanding the height? `position: absolute; bottom: 0;` is putting the text at the bottom of the page, and not the div element itself – bemxio Feb 26 '22 at 11:52
Maybe not!!! Because you used fixed values, that's mean the values will not adjust automatically according to child elements – M Atif Mehmood Feb 26 '22 at 17:45

score 1 · Answer 2 · answered Feb 26 '22 at 11:44

    .currency {
  background-color: #202020;
  height: auto;
  color: white;
}

Set the height property to auto instead of fixing it it will make your p tag inside the div

One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center

How to fit text at the bottom inside a div element?

2 Answers2