Aligning a paragraph vertically in a CSS div

I have a div element with fixed height that is styled using the following CSS properties:

.div {
color: white;
font-family: Bahnschrift;
text-align: justify;
vertical-align: text-top;
}

Within this div, the paragraphs are vertically aligned at the top. I am trying to align only the last paragraph (with class="lastpar") at the bottom of the div by applying the following CSS:

.lastpar {
position: relative;
vertical-align: text-bottom;
}

Unfortunately, this solution does not achieve the desired result. Can you provide guidance on how to successfully align the last paragraph at the bottom of the div? Thank you!

htmlcss

Answer №1

Vertical alignment should not be used to align block elements.

Instead, utilize flexbox for this purpose.

To achieve this, add the following rule to the parent element:

div {
     display: flex;
     justify-content: flex-end;
}

Next, create another div to enclose all elements except for the paragraph you want to keep at the bottom, and you're good to go.

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

Delete items within the first 10 minutes of shutting it down

Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local stor ...

javascripthtmlcss

Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this. Does anyone have recommendations for a good book to learn Bootstrap design? <div class="panel panel-default" style="max-width:500px;margin-left:auto;margi ...

htmlcssasp.net-mvctwitter-bootstrap

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

javascripthtmlxmlinnerhtml

Forward the jsp to the servlet before navigating to the following page

Issue: After submitting the JSP form on Page1, it redirects to a server-side JSP page but appears as a blank page in the browser. Instead, I want it to redirect to Page2 which includes a list box that highlights the newly created item. Seeking help with t ...

javascripthtmljspurlredirect

Handling successful form submissions in HTML

I need to add a success event handler to a basic HTML post form with the following markup: <form action="/Home/UpdateMessage" method="POST"> ... </form> After sending the form, my server responds with: return Json(true, JsonRequestBehavior.A ...

htmlajaxformspostmodel-view-controller

Is there a way to align text and an image with the bottom line in HTML?

After running Code A, I am presented with Image A as the result. I am looking to align this text and image at the bottom line, similar to how it appears in Image B. How can I achieve this alignment? Code A <asp:Label ID="Label1" runat=" ...

htmlcssasp.net

Attempting to connect a dynamic drop-down menu in PHP

I am attempting to establish a connection between a populated drop-down list and a form on another page based on the selected AddressID. The dropdown menu currently displays the addressID's of 6 individuals from my database. When a user chooses an Add ...

phphtmlmysqldatabase

PHP contact form with AJAX functionality without page redirection

I'm currently working on a page that includes a contact form. The issue I'm facing is that when I click on "submit," the form redirects me to another page. What I actually want is for the page not to redirect, but instead display the success mes ...

javascriptphpjqueryhtmlajax

Creating a Popup with a Hazy Background: A Step-by-Step Guide

I've been working on implementing a popup on my existing page that opens 4.5 seconds after the page loads. I want to add a blur effect to the background when the popup appears. I've tried various methods to add the blur effect to the main div, bu ...

javascripthtmlcsspopupblur

Creating a visually appealing chart similar to Excel can be achieved using JavaScript with a whopping 64382 lines of JSON data. No need for Chart.js or any additional tools - simply rely on JavaScript, HTML, and CSS to

I have a project that is due in just a few hours and I need to create a detailed chart using a large set of 64382 lines of JSON data. My knowledge of javascript is limited, so I am struggling to come up with ideas on how to approach this task. While I have ...

javascripthtmlcss

The td's height does not align with the content within

Within this table, there are three images: one on the left, one at the top center, and one on the right. The row for the image at the top center is set to 126px, however, the actual content image size is only 122px. I attempted to use overflow: hidden and ...

htmlcss

How to use a loop to alternate CSS classes in HTML?

Here is a sample code using a while loop: while($fetch = $stm->fetchAll()) { echo '<tr class=""'>; echo '<td>' . $fetch['name'] . '</td>'; echo '</tr>'; } I want to ...

phpcss

Is there a way to simultaneously apply underline and color to specific portions of text in a TextView?

Currently, I'm facing an issue with a string in my EditText that contains an URL link. I want to make this link stand out more by adding an underline and changing its color to blue. However, I am able to add the underline using the "u" tag and Html.f ...

androidhtmlfontscolorstextview

Is it possible to include both a search value and a hash in a URL?

I have created an URL ROUTER using hash (for example, #User.Account) Now I want to include a search value in it as well (e.g. #/User.Account?id=729) How can I achieve this? This is how my router currently functions: if(window.location.hash == "#U ...

javascripthtmljquerycss

Enclose each number within HTML and Javascript tags

I need help styling the numbers on my random name picker website. Below is the code I'm using: HTML <div class="result-border"> <div class="result overflow-auto"> <div id="text"></div> ...

javascripthtml

What is the best way to replace a CSS Background that is already marked as important?

Attempting to change the background of a website using Stylish, but encountering issues. The existing background css on the website includes an !important rule which is preventing Stylish from taking effect. Here is my code: body { background-image: n ...

cssstylish

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

I'm having trouble getting my if statement to function properly with a random number

I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...

javascripthtml

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

I'm in the process of developing a new website, and I'm still learning about PHP. Would it be more advantageous to use .html pages where buttons with Onclick would trigger JavaScript functions that redirect to a PHP page for database interaction ...

phphtml

Give a style attribute to every other child element within a class. Each class should function independently, including their final child which contains an if statement

UPDATE: I kindly request a review of the answers provided. Utilizing JavaScript for this task may not be the most efficient method. I will keep this question as it is, as it could potentially benefit someone else. The aim is for every ".ulInCollapse li" t ...

javascripthtmlcsstypescript