What is the best way to position elements of varying heights at both the top and bottom within table cells?

I am currently developing a website on Drupal that showcases various rural products and services from multiple vendors. The main page features these items displayed in a grid format, each within a 'product card' containing vendor details, address, phone number, product image, name, price, and a 'Buy now' button. However, due to variations in the length of these attributes, the layout of the page appears disorganized (refer to this screenshot: ).

I have a couple of queries regarding this matter:

  1. Is there a specific web design technique to neatly display elements of different heights within fixed-sized containers? Is it achievable to standardize their heights?
  2. How can I align one div (vm_prod_cat) at the top and another(div offsite_selling) at the bottom of the cell? This potential solution could ensure that certain components of the product cards (such as vendor addresses) do not have uniform heights, but the overall layout maintains balance. I attempted to utilize the display: inline-block;, vertical-align: top;, and vertical-align: bottom; attributes, but encountered difficulties.

The grid in Drupal is generated with the following table cells and divs:

<tr class="row-3 row-last">
<td class="col-1 col-first">
<td class="col-2">
<div class="vm_prod_cat prod_cat_tur">
<div>
<div class="views-field views-field-uc-product-image">
<div class="vm_product">
<div class="offsite_selling">
</td>
<td class="col-3 col-last">
</tr>
htmlcssdrupallayoutalignment

Answer №1

To make boxes behave like tables, you can utilize the display:table family rules: 

.gal {
  width:80%;
  margin:auto;
  text-align:center;
  min-width:350px;
}
.gal article {
  display:inline-table;
  height:300px;
  width:30%;
  min-width:100px;
  box-shadow: 0.5em 0.5em 0.5em,
    inset 0 0 0 1px;;
  margin:10px;
}
.gal article > header ,
.gal article > footer ,
.gal article > div {
  display:table-row;
  padding:0.5em;
  background:gray
}
.gal article > div {
  display:table-cell;
  height:100%;
  vertical-align:middle;
  background:rgba(0,0,0,0.2);
}

<section class="gal">
  <article>
    <header>
      header that takes room it needs
    </header>
    <div>
      content that takes room left
    </div>
    <footer>
      footer that takes room needed
    </footer>
  </article>
<!-- ... and so on -->

Take a look at the test example here : http://codepen.io/gc-nomade/pen/ALifh

If each article grows independently, prevent them from expanding in width by adding table-layout:fixed;, although they may still increase in height. Make sure to set a minimum safe height.

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

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

javascriptjqueryhtmlangularimage

What is the best way to access a third table with a hasOne relationship in Laravel?

In my database, I have a table called tickets which is linked to the customer table. The customer table is associated with the user table. Ticket.php public function user() { return $this->hasOne('App\Models\User'); } /** * G ...

phphtmlmysqlangularjslaravel

Attempting to interact with the <Button> element, within selenium web driver utilizing python

I have attempted to interact with a button in the given HTML using Python (Selenium WebDriver). <div class="cssm-TopNav_printIcon_2VzB_"> <button type="button" aria-label="Print" title="Print" class="cssm-Button_button_2a549 cssm-Button_secondar ...

htmlpython-2.7selenium-webdriver

div containing various images of varying sizes

I am working with a layout that requires 4 images to be displayed together within a container. One image should be larger and positioned on the left, while the other three should be uniform in size and placed next to it on the right. Despite my efforts t ...

htmlcss

Troubleshooting JavaScript's onchange Function Dysfunction

Here is the code snippet I am working with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-2.2.1.min.js"></script> <script src="slike.js"></script> ...

javascriptjqueryhtml

Retrieve only the initial tag content using jquery

My goal is to extract the "22" from the following code... <div class="left"> <a class="count-link" href="http://url1.com"> <span>22</span> users </a> <a class="count-link" href="http://url2.com"> <span>10</span ...

javascriptjqueryhtmldom

Angular Flexbox causing alignment problem in CSS styling

I am working on an HTML project that includes Angular FlexLayout components. <div fxLayout="column"> <div fxLayout fxLayoutAlign="space-between"> <span > 3123131 </span> <span > ...

cssangularangular-flex-layout

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

Difficulty Clicking Links with CSS 3D Transformation

I'm currently working on implementing a CSS 3D transform effect on my website. However, I am encountering some issues with clicking the links once the card has been flipped over. Question Why is this happening? How can I resolve this so that I can ...

csscss-transforms

What is the meaning of a "hook" in the world of HTML?

During a recent interview, a developer asked me about the "hooks" Angular uses with HTML. I admitted that I was not familiar with the term "hook," despite my extensive experience in web development over the past two decades. While I have some ideas of what ...

htmlangular

Array of Javascript elements in three dimensions

Currently, I am working on creating a 3D array in JavaScript, but I am facing some uncertainty in the process. My goal is to have three arrays - Provinces, Cities, and Malls - all in a sequential order, and I am looking to build a 3D array to store all thi ...

javascriptjqueryhtml

Tips for adjusting the size of a drawing on an HTML 5 canvas within a personalized Polymer component

In my custom Polymer element, I am looking to dynamically resize an html5 canvas when the window resize event occurs. Despite trying to utilize the window.onresize event, I encountered difficulties with accessing canvas functions. One of the functionalit ...

javascripthtmlcanvaspolymer

Unable to integrate Django into HTML

Having trouble using Django variables within HTML code Here is the code snippet: models.py from django.db import models from django.urls import reverse # Define models here. class Post(models.Model): title = models.CharField(max_length=255) slug ...

pythonhtmldjango

What methods can we employ to engage with embedded HTML pages utilizing Selenium WebDriver?

Struggling to access elements within an embedded html page on a parent html file Hello, The website I am trying to automate includes an embedded html page within the main page. I have been facing difficulty interacting with the elements within the embed ...

htmlselenium-webdrivershadow-dom

Begin the process of setting up PDF.js on the website

I've been attempting to incorporate PDF.js into my website, but I'm struggling to do it correctly. When I try to display the PDF file on the screen, I encounter this issue: https://i.sstatic.net/aixrP.png Although I can't see the PDF file ...

javascripthtmlpdfcakephp-2.5pdf.js

Issue with Email Signature on replies

Recently, I had some email signatures designed and they appear great when sent out, but encounter issues upon receipt or reply: The logo gets distorted and occasionally enlarges significantly during replies. The font color switches to black when receivin ...

htmlcssemailhtml-email

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...

javascripthtmlcssarrays

Is there a way to trigger a document click event without directly interacting with an element?

Whenever I click on a document, a function should be called. However, the issue is that when I click on a specific element, it doesn't react as intended. Here's the code snippet: <body> <div class="some_element"> some eleme ...

javascripthtmljqueryjquery-events

What could be causing the CSS Selector to fail to click on an element even after waiting for it to become clickable?

Take a look at the code snippet below. The important part to focus on is the last line. from selenium import webdriver import os from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.su ...

pythonhtmlseleniumweb-scrapingclickable

Does the html label prevent propagation from occurring?

Can anyone explain why the toggle function is not being executed when clicking inside the box with the black border, but works when clicking outside of it (although not on the checkbox)? var checks = document.querySelectorAll("ul li"); for (var i = 0 ...

javascripthtmlcssdom-events