Alignment of floating divs along the vertical axis

I am attempting to create a row with three divs positioned side by side:

Within the divs, I want the middle one to always be vertically aligned in the middle while the other two are aligned at the top.

I initially achieved this using the following settings

Container:
display:table
Row:
display:table-row
Cell:
display:table-cell with float:none

While this setup worked well, the new requirement is that only the last div should be vertically aligned at the bottom (refer to attachment 2):

However, I have been unsuccessful in achieving this as the display table cell and vertical-align:top properties on the left and right divs do not allow for vertical alignment at the bottom.

I also attempted to utilize position absolute on the last div, but determining whether the variable height of the div is greater on the left or right side proved to be a challenge.

Thank you for any assistance you can provide!

javascriptjqueryhtmlcss

Answer №1

flexbox provides a simple solution for this task

* {
  box-sizing: border-box;
}
.wrap {
  width: 80%;
  margin: 5vh auto;
  border: 1px solid grey;
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid green;
  padding: 1em;
  margin: 1em;
}
.left,
.right {
  flex: 2;
  /* proportional width to middle */
}
.middle {
  justify-content: center;
}
header {
  flex: 0 0 25px;
  background: red;
  margin-bottom: 1em;
}
nav {
  flex: 0 0 35px;
  background: blue;
  margin-bottom: 1em;
}
.content {
  flex: 0 0 auto;
  background: orange;
  margin-bottom: 1em;
}
footer {
  height: 50px;
  background: green;
  width: 50px;
  align-self: flex-end;
  width: 100%;
  margin-top: auto;
}
<div class="wrap">
  <div class="col left">
    <header></header>
    <nav></nav>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum magnam maiores unde consequuntur, similique deserunt delectus omnis expedita in, laborum praesentium consequatur
      eius adipisci saepe rerum reprehenderit nostrum temporibus.</div>
    <footer></footer>
  </div>
  <div class="col middle">
    <div class="content">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="col right">
    <header></header>
    <nav></nav>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, modi!</div>
    <footer></footer>
  </div>
</div>

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

Troubleshooting Issue with Formidable Not Working with Multer

Attempting to develop a webpage that enables users to upload a file to a designated folder while specifying a number in an input field. Currently, I am navigating through the Multer library despite typically using body-parser. Referencing both my app.js an ...

javascriptnode.jsexpressejsmulter

Mastering jQuery's Traversing Techniques: Navigating to the Perfect Element

Below is the HTML code that I have, which cannot be changed for multiple reasons: <ul class="menu"> <li>About Us <div class="menuHover"> <ul class="left"> <li class="item"><a href="#" title="Link"&g ...

jqueryjquery-traversing

Tips on incorporating jQuery cross-domain functionality

Attempting to retrieve and display the firstName data from this URL: http://www.w3schools.com/jquery/demo_ajax_json.js, as part of a test for another project. Encountered the error message: Origin null is not allowed by Access-Control-Allow-Origin, prompt ...

javascriptjqueryajax

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

To enhance readability, the intricate code has been abstracted. Within our Angular 2 project, we are working with a component called <top-component> (LEVEL 1): <top-component> </top-component> This component includes a template known a ...

javascripthtmlangulartypescriptdataflow

An easy way to divide an array into a table

I've obtained these arrays from a JSON file "Works": [ {"TypeOfWork": "scaffolding", "Status": "done"}, {"TypeOfWork": "painting", "Status": "on-going"} ] My go ...

htmlarraysangularjshtml-table

Conceal the "Load More" button on the filter tabs, with the exception of the "

My website features filterable tabs and photos categorized into different groups. The main category is "All" followed by 4 additional categories. There are two important functions that I have implemented: The first function is for filtering: $(function( ...

javascriptjqueryfilter

Different ways to create space between list items

My nav is causing some trouble - the header looks good, but the ul just won't cooperate. .nav { display: flex; justify-content: space-between; align-items: center; } nav ul { margin: 0; padding: 0; display: flex; flex-direction: row; ...

htmlcssflexboxnavigationbar

Evaluating the success of the download using supertest

I've been testing my API endpoints using supertest and it has been successful so far. However, I am encountering a challenge with testing the success of a file download. My routes file includes the following endpoint: app.get('/api/attachment/: ...

javascriptnode.jsexpressmocha.jssupertest

Vue.js tutorial: Displaying the like count on every post

Code Snippet in My Home.vue File: <template> <div> <my-post v-for="(post, index) in posts" :post="post" :index="index" :key="post.id" ></my-post> </div> ...

javascriptvue.js

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

csshtml

Utilizing Next.js: Implementing ContextAPI with various values requiring updates from child components

Within the context provider wrapper function, I am storing three values. The challenge now is updating these context states in the login and logout components, and utilizing them in the navbar and other areas of the application. const AppContext = createCo ...

javascriptreactjsnext.jsreact-context

How to utilize DefinePlugin in Webpack to pass NODE_ENV value

I am attempting to incorporate the NODE_ENV value into my code utilizing webpack through the use of DefinePlugin. I have reviewed a similar inquiry on Stack Overflow, but I am still encountering issues. Here is the configuration I am working with: In pac ...

javascriptnode.jsnpmwebpack

Are there any tools available that can convert inline styles into CSS classes?

Can anyone recommend a package that will transform this text: <p style="width: 500px; height: 500px"> Hello World </p> into this format: <p class="foo"> Hello World </p> .foo { width: 500px; height: 500px; } ...

htmlcssnpm

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

I recently developed a drag and drop tree list inspired by the tutorial on IgniteUI website. The main tree list functions properly, but I encountered an issue with the child nodes displaying as undefined, as illustrated in the image below: https://i.sstat ...

javascriptangulartypescriptignite-uiigtree

Retrieving ng-model using ng-change in AngularJS

Here is an example of the HTML code I am currently working with: <select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select> This HTML snippet is being populated by the following object containing a ...

javascriptangularjs

In React JS, when the navbar button is clicked, the URL is updated but the content does not refresh

Upon clicking the button, the URL changes but the content remains the same. Interestingly, if I use an <a> tag instead of a <Link> tag, the page loads and the content updates as well. However, when using the <Link> tag, the data does not ...

javascripthtmlcssreactjs

CodeIgniter functionality for generating auto-incrementing IDs that are accessible in both the view and within JavaScript's Window.Print() method

While working on creating an invoice, I encountered a few issues. First, I want the Invoice No: to be displayed in my view (receipt.php) as 0001 and use it as the primary key in my tbl_payment table. However, I'm unsure how to have an auto-incremented ...

javascriptphpcsscodeigniter

What is the best way to determine the quantity of elements received from an ajax request?

Here's the method I am currently using to count the number of li elements returned from an AJAX call: $.post('@Url.Action("actionName", "controller")', function (data) { $('#notificationCounter').html($(data).find('li&a ...

javascriptjqueryajax

Utilizing jQuery to initiate AJAX requests in the .NET environment

Can you make an Ajax request using jQuery's "$.ajax" and achieve partial rendering without relying on the .NET Ajax framework (without script manager)? I've attempted this previously, but it seems to execute the page_load every time without reac ...

asp.netjquery

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress