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

"An easy way to dynamically update a select dropdown based on the data of the corresponding row in a table using jQuery

Having some trouble with dynamically populating form input fields in a table. The first row works fine, but when I change the select option in the second row, it affects the previous field instead of the current row: How can I ensure that changing the sel ...

javascriptjqueryhtmlformshtml-table

What is the best method for combining multiple text box values into a single text box?

I need assistance with concatenating multiple text box values into one dynamic text box. I am currently retrieving values using IDs, which are dynamically added as the text boxes are dynamically created. However, when using a for loop to dynamically add te ...

javascripthtml

The function window.scrollBy seems to be causing a conflict with jjmslideshow, resulting in the page being unable to

I wrote a simple script to create a "smooth scroll" effect when a specific link is clicked: (function() { 'use strict'; // Checking for compatibility if ( 'querySelector' in document && 'addEventListener' in window ...

javascriptjqueryhtmlcss

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

cssreactjsmantine

Displaying a dynamic progress bar across all elements in fullscreen mode

I am looking to implement a full-screen indeterminate progress bar that overlays all screen elements. Here is my specific use case: When a user fills out a form, including an email field, the email id is checked against a database via ajax. While waiting ...

javascriptjqueryhtmlcss

Having issues with the horizontal list layout

I am having trouble implementing Bootstrap horizontal lists on my website. How can I resolve this issue? Desired outcome: https://i.sstatic.net/zzBFi.png Current situation: https://i.sstatic.net/cfoZN.png Below is the snippet of CSS code in question ...

htmlcsstwitter-bootstrap

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

Incorporate SVG or HTML5 elements into a Box2D World

My SVG logo is primarily composed of elements. I am interested in animating it by placing it in a "gravity world". Although I am new to Box2D and Canvas, I have managed to convert my SVG into HTML5 canvas using canvg. Currently, I am going through the begi ...

htmlanimationsvgbox2dgravity

Which JSF element is capable of displaying a <div> element?

For example, h:inputText will display an "input type='text'". Which JSF tag is used to render a "div" element? ...

jsfhtml

Endless scrolling feature malfunctioning

On my profile_page.php, the default setting is to display 10 posts (10 rows from the database) for the user. If a user has more than 10 posts, and scrolls to the bottom of the page, the div should expand to reveal the remaining posts (maximum of 10). For e ...

javascriptphpjqueryhtmlajax

Creating a competition schedule - pieces don't quite mesh

Having trouble getting my tournament bracket visuals to come together smoothly! Here is the CSS code I have: #tournament-holder{ width:708px; padding:20px 0 20px 15px; float:left; } .vertical-holder{ width:100px; padding-right:15px; float:left; } .horizo ...

phphtmlcss

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...

cssangulartypescriptsass

HTML - maintain centered text positioning while implementing padding on the left side

Here are the HTML and CSS code snippets I am working with: #page { background-color: #000; color: #fff; height: 360px; width: 360px; min-height: 100%; } #viewport { font-size: 20pt; text-align: center; } .taskTitle { height: 13%; fon ...

htmlcsslayoutstyles

Switch between two PHP files with a toggle feature using jQuery click event

Need help with toggling between two PHP files - cab.php and d3.php. Toggling within the same file works fine, but encountering issues when trying to toggle from one file to another. function botaod2mostraesconde() { $(".wrapd2").toggle(); $( ...

javascriptphpjqueryhtml

"Unveiling the invisible: Revealing hidden characters in PHP

Currently I am dealing with some code extracted from a MySQL column. Within this code are hidden characters like "\t" and "\n". I am attempting to showcase the raw code in a DIV while also making sure these hidden characters are visible. The cod ...

phphtmlcharacter-encoding

CSS: Display the index of each ordered list item within a child element

I'm working on creating a unique accordion-style widget similar to the design shown in this image: My plan is to utilize an ordered list where each <li> element will include a question, answer, and an expand/collapse button. <li> < ...

htmlcss

Display/Conceal JavaScript

I recently implemented a JavaScript function on my website to show/hide specific elements. However, being new to JavaScript, I have encountered some difficulties. I've spent quite some time troubleshooting the code but haven't been able to pinpoi ...

javascripthtml

Is there a way to transmit a div using Node.js?

Scenario: I am developing a web application that allows users to draw on a canvas, save the drawing as an image, and share it with others using Node.js. Current Progress: Drawing functionality (real-time updates on both clients). Saving the canvas as a ...

javascripthtmlnode.jscanvas

Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any ch ...

javascriptjqueryhtmlcss