Tips for aligning a div within a flexbox to the bottom position

I'm having trouble aligning the div at the bottom of the flex box. I attempted to use align-content: flex-end; but it didn't work.

Is there a way to keep the <.div class="parameters"> at the bottom of the row? Especially when the content in the row above this bottom part varies in length.

https://i.stack.imgur.com/FMCjc.png

    .product--5-cols {
    max-width: 23%;
    min-width: 250px;
    -webkit-flex-basis: 23%;
    -ms-flex-preferred-size: 23%;
    flex-basis: 23%;
    border-width: 0 1px 1px 0;}
   

    .compare {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: scroll;
    align-items: stretch;}
<div class="product-overview compare" id="product-compare">
          <div class="product--5-cols">
              <h2 id="products-to-compare" class="compare-page-title">Comparison (5)</h2>
              <div class="parameters">
              <div class="compare-product-parameters-white" id="compare-sock"><span class="in-stock in-stock--up">In Stock</span></div>
              <div class="compare-product-parameters-blue" id="compare-brand">Solight</div>
              <div class="compare-product-parameters-blue"><span class="in-stock in-stock--up">Replenishing</span></div>
              </div>
          </div>
          <div class="product--5-cols">
            <div class="product product--5-cols">
              <div class="product__labels">
              </div>
              <div class=" compare_page_heading">
                <h5><a href="product-detail.html">Light Model Security Camera, Wall Mount, LED Light</a></h5>
              </div>
              <div class="product__info"><div class="product-row__actions"><a class="remove" href="#" title="Delete"><i class="icon icon-close">
                <div class="sr-only">Delete</div></i></a></div></div><a class="product__img" href="product-detail.html"><img src="assets/images//samples/product-1.jpg"></a>
              <div class="product__price compare_page_price"><strong>19&nbsp;306&nbsp;CZK</strong></div>
              <div class="product__footer">
                <a class="item compare_page_icon" href="#"><i class="icon icon-heart" title="Favorite"></i></a>
                <div class="product__buy compare_page_buy">
                  <div class="form-control-wrapper">
                    <div class="counter"><a class="counter__plus" href="#">+</a><a class="counter__minus" href="#">-</a></div>
                    <input class="form-control" type="number" value="1"><span class="units">pcs</span>
                  </div>
                  <button class="btn btn-primary btn-xlg" title="Buy"><i class="icon icon-add-to-cart"></i></button>
                </div>
              </div>    
            </div>
            <div class="parameters">
            <div class="compare-product-parameters-white" id="compare-sock"><span class="in-stock in-stock--up">In Stock</span></div>
            <div class="compare-product-parameters-blue" id="compare-brand">Light</div>
            <div class="compare-product-parameters-blue"><span class="in-stock in-stock--up">Replenishing</span></div>
            </div>
          </div>

htmlcss

Answer №1

Your website layout needs improvement. Check out flexbox on Google for guidance.

.product--5-cols {
  max-width: 23%;
  min-width: 250px;
  -webkit-flex-basis: 23%;
  -ms-flex-preferred-size: 23%;
  flex-basis: 23%;
  border-width: 0 1px 1px 0;
  height:100vh;
  position:relative;
}



.compare {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: scroll;
  align-items: stretch;
}

.parameters {
  position:absolute;
  bottom:0;
}
<div class="product-overview compare" id="product-compare">
  <div class="product--5-cols">
    <h2 id="products-to-compare" class="compare-page-title">Comparison (5)</h2>
    <div class="parameters">
      <div class="compare-product-parameters-white" id="compare-sock"><span class="in-stock in-stock--up">In Stock</span></div>
      <div class="compare-product-parameters-blue" id="compare-brand">Solight</div>
      <div class="compare-product-parameters-blue"><span class="in-stock in-stock--up">Restocking Soon</span></div>
    </div>
  </div>
  <div class="product--5-cols">
    <div class="product product--5-cols">
      <div class="product__labels">
      </div>
      <div class="compare_page_heading">
        <h5><a href="product-detail.html">Light Model Security Camera, Wall Mounted, LED Light</a></h5>
      </div>
      <div class="product__info">
        <div class="product-row__actions"><a class="remove" href="#" title="Delete"><i class="icon icon-close">
                <div class="sr-only">Delete</div></i></a></div>
      </div>
      <a class="product__img" href="product-detail.html"><img src="assets/images//samples/product-1.jpg"></a>
      <div class="product__price compare_page_price"><strong>$19.99</strong></div>
      <div class="product__footer">
        <a class="item compare_page_icon" href="#"><i class="icon icon-heart" title="Favorite"></i></a>
        <div class="product__buy compare_page_buy">
          <div class="form-control-wrapper">
            <div class="counter"><a class="counter__plus" href="#">+</a><a class="counter__minus" href="#">-</a></div>
            <input class="form-control" type="number" value="1"><span class="units">pcs</span>
          </div>
          <button class="btn btn-primary btn-xlg" title="Buy Now"><i class="icon icon-add-to-cart"></i></button>
        </div>
      </div>
    </div>
    <div class="parameters">
      <div class="compare-product-parameters-white" id="compare-sock"><span class="in-stock in-stock--up">In Stock</span></div>
      <div class="compare-product-parameters-blue" id="compare-brand">Light</div>
      <div class="compare-product-parameters-blue"><span class="in-stock in-stock--up">Restocking Soon</span></div>
    </div>
  </div>

Answer №2

 .product--5-cols {
    max-width: 23%;
    min-width: 250px;
    -webkit-flex-basis: 23%;
    -ms-flex-preferred-size: 23%;
    flex-basis: 23%;
    border-width: 0 1px 1px 0;}

    .compare {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: scroll;
    align-items: end;}

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

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

htmlcss

Connecting two fields with a line on click in AngularJS

In the top section, there are 10 fields and in the bottom section, there are another 10 fields. I want to be able to connect two fields with a line when they are clicked (one from the top section and one from the bottom section). This connection should app ...

javascripthtmljquerycssangularjs

Pure CSS text slideshow

I'm currently working on developing a text content slideshow using only CSS. Here is the HTML/CSS code I have: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow examp ...

htmlcssanimationslideshowcss-animations

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

What is the best way to have an HTML radio button automatically display as selected upon loading if the stored value is "on"?

Utilizing Javascript alongside html: I am facing an issue where a list containing radio buttons is dynamically loaded based on stored data when the page launches. Despite the stored value of the radio being set to "on", the radio button does not show up a ...

javascriptjqueryhtml

"Customizing the website's font: A step-by-step guide to replacing the default Roboto font with a custom font

Despite my efforts to globally override the font, I am still encountering instances where the Roboto font is not being replaced, particularly on MUI select and autocomplete components. import { createTheme } from '@material-ui/core/styles'; // A ...

cssreactjsmaterial-ui

Converting HTML to PDF using AngularJS

Can anyone help me with converting HTML to PDF in Angular? I have tried using the angular-save-html-to-pdf package from npm, but encountered errors. Are there any other solutions or custom directives available for this task? ...

htmlcssangularjspdfhtml2pdf

Drifting my dropdown menu bar through the digital sea

I'm having trouble with my navigation bar and I need help styling it. I want the navigation bar to have a dropdown menu when the user hovers over the top level of the navigation bar. The issue I am facing is that the second level of the navigation bar ...

htmlcssdrop-down-menu

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

jqueryhtmlcsscheckbox

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

Upon reloading, the dynamically generated table does not appear accurately

When a table is dynamically created using JavaScript/jQuery/html from an Ajax call, it initially displays correctly formatted. However, upon refresh/reload, the formatting of the table becomes incorrect. To address this issue, I have implemented a Promise ...

javascripthtmljqueryajax

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

javascriptjquerycssanimationjquery-animate

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

Having trouble submitting a date input form generated with vuejs on Safari browser

I am a huge fan of Vuejs and it's my go-to at work. The other day, I came across a rather perplexing scenario. If you have any insights into this, please do share. Here is the code in question: <script setup lang="ts"> import { ref ...

javascripthtmlvue.jssafari

Display the Ajax response in a designated div

I am facing an issue with my ajax code. It doesn't print any output, but when I use alert() to print the output, it shows up fine. $(".grp-ans").each(function(e){ $.ajax({ type: 'POST', url: 'show-answ ...

jqueryhtmlajax

What is the best way to maintain the current position in a component while interacting with another component?

I have a component that displays a collection of cards with images. There is a button that toggles between showing another component and returning to the original list of cards. The issue I am encountering is that every time I return to the list of cards, ...

javascriptcssreactjs

sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...

javascripthtmlcssnavigationsidebar

The <a> tag with href attribute is mistakenly identified as an external link when used in conjunction with the <base> tag

I am currently working with jQuery UI tabs using jquery 1.11.1 and jQuery ui 1.11.1. Within the <base> tag in the head>, I have the following: <base href="http://mytestdomain.com/" /> Upon loading the page, jQuery UI creates two tabs from ...

jqueryhtmlajaxjquery-uijquery-ui-tabs