Tips for positioning text within a div element's bottom edge

I'm facing a challenge in creating a footer for a div element that contains a <p> tag. The issue arises when the font size varies, causing the footer to extend outside the box. How can I ensure that it aligns at the bottom of the page with the correct padding?

Below is the snippet of HTML & CSS code:

@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>

htmlcss

Answer №1

The issue arises from setting a fixed height for .currency instead of using height:20%, which should be replaced with height:auto;

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

To anchor it at the bottom, consider using positioning properties like:

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

Answer №2

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

Instead of setting a fixed height, try setting the height property to auto for more flexibility with your p tag inside the div

Here's a tip: Avoid using the center tag as it is outdated. Instead, achieve similar results with the css property text-align: center

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What purpose does '& .MuiTextField-root' serve within the { makeStyles } function of Material UI?

I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...

cssreactjsmaterial-ui

Find the elements of <a> tags specifically without the attribute href

Currently, I am extracting the class of all <a> elements in an HTML document of a webpage using VB.net from a WinForm: Dim htmlLinks As HtmlElementCollection = WebBrowser1.Document.GetElementsByTagName("a") For Each link As HtmlElement In htmlLi ...

javascriptjqueryhtmlcssvb.net

The Media Query Menu is not aligned in the center for smaller screens, functioning in both medium and extra-small sizes

@import url('https://fonts.googleapis.com/css?family=Dosis'); * { box-sizing: border-box; } /*Xtra Small */ body { font-family: 'Dosis', sans-serif; line-height: 1.618em; font-size: 18px; background: #383231; c ...

cssresponsive-designmedia-queries

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

htmlcssbootstrap-4

Retrieve the JSON data embedded within the HTML source code and utilize its contents

I stumbled upon a URL like http://example.com. Taking a look at the HTML source, it appears as follows: <html> test test2 {"customer":{"email":null,"is_eu":true"} t </html> My goal is to extract the JSON data from this source and then manipul ...

phphtmljson

Updating a Pandas Column in Python Using a for Loop

My lack of experience with web scraping is definitely showing as I am relatively new to this. The goal of my code is to scrape all the data from a webpage, which it does successfully. However, before the loop continues, I want pandas to write the current p ...

pythonphphtmlselenium-webdriverweb-scraping

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

javascripthtmlnode.js

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?

Greetings! I am currently learning how to implement AJAX with jQuery to load an HTML document into a div element within another HTML document. Here is the approach I am using: function pageload() { $.ajax({ url: 'Marker.aspx', ...

javascripthtmljquery

A step-by-step guide on how to use ajax/jquery to access an external webpage without relying on iframe

Is there a more effective way to call another page, such as http://www.google.com, and load it into my specific div without using an iframe? I attempted to do so with ajax... $.ajax({ url : 'http://www.google.com', success : function ( ...

javascripthtmlajax

Tips for adding a solid background color to a div element

I am struggling with trying to make a full width background-color for a div in my ruby on rails app. Despite setting the background color and margin to 0, I still end up with unwanted margins on the left, right, and top. Below is the code snippet: <!D ...

ruby-on-railsrubyhtmlcolorsbackground

I have a dynamic form code that allows users to insert data by adding multiple inputs in a row. However, I would like to modify it so that the inputs are added in a column instead

I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...

phphtmlcssmysql

javascript execute while load

I'm having trouble initializing inputs with maps api autocomplete based on the number of inputs retrieved from the database. I'm trying to run a simple JavaScript function within a while loop, but it's not working as expected. Although the ...

javascriptphpjqueryhtml

How can I implement an autocomplete feature in Vue.js?

Recently, I started working with Vue and decided to create a basic search app using Vue.js cdn. My goal is to add a suggestion bar that displays user IDs from a fake JSON server. For instance, if I input '1' in the search bar, I want only the use ...

htmlajaxvue.js

Inject the HTML code into a bash script and perform operations on it

Could someone help me with a bash scripting question? I'm new to this, so I may have missed it if it's already been answered. I want to pass the html source code of a web page to my script, which will then modify or scrape the web page of its HT ...

htmlbashstdin

Is it possible to integrate external search functionality with Vuetify's data table component

I am currently working with the v-data-table component from Vuetify, which comes with a default filter bar in its properties. This table retrieves data from a local JSON file. The issue arises when I have another external component, a search bar created u ...

javascripthtmljsonvue.jsvuetify.js

Securing ASP.NET Core applications with iframe authentication cookies

I seem to be facing an issue with my iframe. Whenever I attempt to login, it appears that my authentication cookie is not functioning correctly as I keep getting redirected back to the login screen. How can I resolve this? The cookie operates normally whe ...

htmlasp.net-coreiframerazor-pagesx-frame-options

Utilizing Django to recycle an HTML block for multiple for loops within the same template

I have three specific states for an object - 1. to start, 2. started, and 3. finished. Upon filtering the objects in view, I pass three variables to the template - tostart_objects, started_objects, and finished_objects. My current approach involves loop ...

pythonhtmldjangodjango-templates

Using HTML classes to align text with colored letters in the center

I'm attempting to alter the colors of individual letters within a sentence using html and css. After conducting some research, I came across this method: Here is the html and css code snippet I used: .green { font-size: 20px; color: #0F3; te ...

htmlcss