Positioning three divs next to each other and aligning them at the bottom of the longest div

While I've seen similar questions about aligning divs in a row, my situation has a slightly different twist. I have three divs that I want aligned horizontally, with their content pushed to the bottom. I've attempted using position: relative and position: absolute with bottom: 0, but no luck.

Below is the CSS code along with some images for clarification:

.topAlbums {
    border: 2px solid black;
    overflow: hidden;
}
.album0 {
    width: 33%;
    padding-right: 20px;
    float: left;
    border: 2px solid blue;
    padding-bottom: 500em;
    margin-bottom: -500em;
}
.album1 {
    width: 33%;
    padding-right: 20px;
    float: left;
    border: 2px solid blue;
    padding-bottom: 500em;
    margin-bottom: -500em;
}
.album2 {
    width: 33%;
    padding-right: 20px;
    float: left;
    border: 2px solid blue;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

https://i.sstatic.net/WAfhM.png

htmlcss

Answer №1

Create consistent heights and align content to the bottom using display values like table, table-row, and table-cell.

For a visual example, refer to this fiddle: https://jsfiddle.net/oyzorx4r/

<div class="table">
  <div class="row">
    <div class="cell">
      content positioned at the bottom
    </div>
    <div class="cell">
      additional information<br /><Br /> with extra line breaks
    </div>
    <div class="cell">
      <p>
        extensive details<br /><br /><Br /><Br /><br />and more content
      </p>
    </div>
  </div>
</div>


.table {
  display:table;
  width:100%;
  overflow:hidden;
}
.row {
  display:table-row;
}
.cell {
  display:table-cell;
  width:33%;
  background:red;
  vertical-align:bottom;
}

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

JavaScript and jQuery experiencing difficulty rendering proper style and image in output display

I am currently working on code that extracts information from a JSON variable and displays it on a map. The code looks like this: marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4> ...

javascriptjquerycss

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays

Eliminate redundant tags using jQuery

I have a code snippet that I need help with. I want to check for duplicates and if found, display an alert stating that it already exists so users can't insert the same word/tag again. Can someone please assist me? <div id="tags"> <span>a ...

javascriptjqueryhtml

What is the best way to centrally position a <mat-card> on the screen using Angular 9?

* I'm struggling to center a <mat-card> on the screen, specifically within the toggle-device-toolbar. It's intended for mobile phones and I could use some guidance. I'm working with angular-material and ng-bootstrap* Here is the code ...

cssangularbootstrap-4angular-materialng-bootstrap

Tips for reducing noise on your website during the deployment process

Currently in the process of creating a website and incorporating fonts from Google Webfonts. While these fonts appear sleek and flawless on Google's own site, once implemented onto my own site they seem quite noisy. Any suggestions for how to prevent ...

htmlcss

Selenium - How to effectively obtain hyperlinks?

There are numerous web elements similar to this example <a data-control-name="browsemap_profile" href="/in/quyen-nguyen-63098b123/" id="ember278" class="pv-browsemap-section__member ember-view"> <img widt ...

htmlseleniumweb-crawlerabot

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

javascriptjqueryhtml

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

javascriptjqueryhtmlcssmodal-dialog

Enhancing the appearance of text by applying a background color solely to its length

After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully. The problem at hand involves providing a colo ...

htmlcss

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

htmlcssbutton

I find myself facing a roadblock in navigating Servlets and HTML

I'm currently immersed in a project aimed at launching an innovative online food ordering platform. To bring this vision to life, I've harnessed the power of HTML, CSS, and JavaScript for frontend development, Java (Servlets) for backend function ...

javascriptjavahtmlservletsbackend

Blackberry Browser 4.2 experiencing spacing troubles

Seeking advice for developing a web application specifically for the Blackberry Browser 4.2. Looking to add vertical spacing between a series of links, but struggling due to lack of support for padding and margin in this version. Have tried using height an ...

htmlbrowserblackberrylayoutrim-4.2

Unfortunately, I am currently unable to showcase the specifics of the items on my website

I am trying to create a functionality where clicking on a product enlarges the image and shows the details of the product as well. While I have successfully implemented the image enlargement, I am facing challenges in displaying the product details. Below ...

javascriptphpcss

Incorporating visuals into Doxygen documentation

Struggling to add an image with a caption in a doxygen .md file. Adding a caption is easy, but aligning the image left is proving difficult. I've tried several methods, but none have worked successfully. ![Caption](my_image.png "Caption") R ...

htmlimagealignmentdoxygencaption

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

jqueryhtmlcss

how to enable drag and drop functionality based on names in angularjs

In my project using angular js, I have implemented a drag and drop feature that allows items to be dragged between cells in two directions. I now want to enhance this functionality by allowing members with 'a's (e.g. 1a, 2a, etc.) to be dragged ...

htmlangularjs

Ways to increase the size of a div to match the maximum height of its parent container

My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its conte ...

htmlcssangular

Tips on creating a Django query based on user-selected options from a drop-down menu

As a newcomer in an internship role, I have been tasked with creating a website where users can select a program, location, or theme to visualize on a heatmap. To achieve this, I opted to utilize Django. However, I am facing two challenges: Firstly, my M ...

pythonhtmldjangodjango-viewsdjango-templates

When adding margin-left and margin-right, images do not appear in their designated positions

I have a chart displaying images, which are showing up correctly. However, I am facing an issue when I try to add some spacing to the chart by using margin-left and margin-right. Here is the CSS code I included: #chart1 { margin: 0 auto; ...

javascripthtmlcss

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...

htmlcsshtml-table