Position multiple divs at the bottom of aligned divs

I'm currently facing issues with aligning divs at the bottom within multiple vertically aligned divs.


    <p>Top of page</p>
 <div id="container">
 <div class="message">area1</div>
 <div class="message">area2</div>
 <div class="message">area3
    <div class="subarea">subarea3</div>
    <div class="subarea">subarea4</div>
</div>
</div>
<p>Bottom of page</p>

CSS

 
#container {
height: 1000px;
}

.message {
height: 80%;
width: 30.6%;
float: left;
border:1px solid red ;
vertical-align: top;
background-color: #D4D0C8;
overflow-x: hidden;
padding-bottom: 120px;
}
.subarea{
padding: 5px;
border-bottom: 1px solid #B9A073;
word-wrap: break-word;
width: 99%;
padding-bottom: 5px;
float: left;
}

View the Jsfiddle demo here.

The current display looks like this:

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

However, I would like it to look like this:

https://i.sstatic.net/0sxqe.png

I have attempted the solutions mentioned in other posts:

  • Setting the main div to relative and the inner div to absolute with a bottom value of 0, but no success.

  • Changing the main div to vertical-align bottom and display table-cell, also unsuccessful.

If anyone has any advice or suggestions, please help. Thank you!

htmlcss

Answer №1

Have you considered wrapping the .subarea in a container with a CSS style of position: absolute; bottom: 0;?

Check out the code snippet below:

#container {
    height: 1000px;
}

.message {
    position: relative;
    height: 80%;
    width: 30.6%;
    float: left;
    border:1px solid red ;
    vertical-align: top;
    background-color: #D4D0C8;
    overflow-x: hidden;
    padding-bottom: 120px;
}
.subareas{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.subarea{
  padding: 5px;
    border-bottom: 1px solid #B9A073;
    word-wrap: break-word;
    width: 99%;
    padding-bottom: 5px;
    float: left;
}
<p>Top of page</p>
<div id="container">
<div class="message">area1</div>
<div class="message">area2</div>
<div class="message">area3
        <div class="subareas">
          <div class="subarea">subarea3</div>
          <div class="subarea">subarea4</div>
        </div>
  </div>
</div>
<p>Bottom of page</p>

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

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

htmlcssangulartypescriptangular2-template

`Is it possible to remove an empty frame using javascript?`

I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...

javascriptjqueryhtml

Create a right-to-left (RTL) CSS file within a create-react-app project and dynamically switch between them depending on changes

I am currently working on a multi-language project using create-react-app. My goal is to incorporate a library like "cssJanus" or "rtlcss" to transform the Sass generated CSS file into a separate file. This way, I can utilize the newly created file when sw ...

cssreactjscreate-react-appright-to-leftrtlcss

Launch a popup modal box from within an iframe and display it in the parent window

I'm facing a challenge with opening a modal dialog in the parent page from an iframe. The button to open the modal dialog resides in the iframe, but the modal div is located on the parent page. Here's a snippet of my parent page: <html xmlns ...

jqueryhtmliframepopupmodal-dialog

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

htmlcss

Converting HTML to plain text - unclear source encoding

I am currently working on a project involving PHP where I extract HTML content from websites, convert them into plain text, and store them in a database. The challenge I am facing is that I do not know the original encoding of the content. What would be t ...

phphtmlcharacter-encodingarabicstrip-tags

Is it possible to customize the appearance of the Facebook Like box with a scroll-bar?

I recently added a Facebook like-box to my website, and I'm trying to customize the scroll bar within the iframe. However, I'm struggling to find a way to do so. Does anyone have any ideas on how this can be achieved, or if it's even possibl ...

cssfacebookstylesfacebook-likescrollbar

Get the image from the express route

Currently, I am running an express server with the following route: exports.getUserFile = function (req, resp) { let filePath = path.join(__dirname, 'storage', req.params.fileName); resp.download(filePath); }); } Within my web app ...

javascriptnode.jshtmlrestexpress

When I attempt to run JavaScript code on the server, it fails to execute properly

When I run my code on my PC without putting it on the server, it works perfectly fine. However, when I upload it to the server and try to call it, I encounter the following error: Uncaught ReferenceError: crearLienzo is not defined at onload ((index): ...

javascripthtmlserveronload

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

htmlvue.jsvuejs2element-uivue-props

Is the "position: sticky" feature functioning correctly, or is there a slight vibrating or dancing effect when users scroll through the Ionic app? How can we eliminate this issue specifically on iOS

Looking for suggestions on this problem - the position sticky is functioning correctly, but there seems to be a slight vibration or dancing effect when users scroll in the Ionic app. Any ideas on how to eliminate this issue specifically on iOS devices? & ...

htmlcssuser-interfaceionic-frameworksass

Centered vertically on the right side of a div, a CSS arrow is positioned

Hello, I am seeking a way to vertically center a CSS triangle/arrow on the right side of a div using pure CSS. Unfortunately, I can't include images due to my low reputation. Currently, my code is not functioning properly and lacks cross-browser comp ...

htmlcsscss-shapes

What is the best way to extract data from several SQL tables and display it in an HTML/PHP table?

In my database named result, I have two tables named res and sub. Here is an example of the contents in the res table: sno regno name sub1 sub2 sub3 sub4 sub5 1 1DU12CS100 student1 70 80 85 70 90 2 1DU12CS101 ...

phphtmlmysqlformshtml-table

django is not able to load staticfiles from the statifiles_dirs directory

I have placed my style.css in the directory appname/static/appname/. In my settings.py, this is what I have: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static/"), ) When I try to load it in my base.html like t ...

pythoncssdjangostylesdjango-staticfiles

What methods can I use to identify the selector for this element?

After pinpointing the specific element in Google Chrome using inspect element, what kind of path or syntax should I use to apply a method to this element? The hierarchy for the element is outlined below: html body div#contentDiv div#searchFormDiv ...

csscss-selectors

Easy-to-use form input ensuring a constant total of 100

Looking for a way to collect numerical values from users that total 100% on a dynamically generated form? I'm exploring the idea of using a script or algorithm to adjust text fields as values are changed, ensuring they always add up to 100%. However, ...

htmljquerywidget

Executing a jQuery function automatically & Invoking a jQuery function using the onClick attribute in an HTML element

Having some issues with jQuery and could use some assistance... Currently, I am trying to have a jQuery function automatically execute when the page loads, as well as when a button is clicked. [Previous Issue] Previously, the jQuery function would automa ...

javascripthtmljquery

conflicting character encoding systems

Request normally comes in this format: Parameters: {"utf8"=>"✓", "status_id"=>"12686"} However, from one particular client, the request looks like this: Parameters: {"utf8"=>"\xE2??", "status_id"=>"12686"} As a result, I am encounter ...

htmlruby-on-railsencodingutf-8rack

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

javascriptcssreactjstypescriptmaterial-ui

Showing content in a single line causes it to drop down to the next

Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...

htmlcss