Making all elements the same height in rows with w3.css

Struggling to achieve equal height for the elements in my rows. Any suggestions on how to make this work?

Thank you and cheers.

<div class="w3-row">
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
            <h3><i class="material-icons">person</i> name</h3>
            <p>100112</p>
    </div>
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
        <h3><i class="material-icons">person</i> name</h3>
        <p>100112</p>
    </div>
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
        <h3><i class="material-icons">person</i> name</h3>
        <p>100112</p>
    </div>
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
            <h3><i class="material-icons w3-xxlarge">remove_circle_outline</i></h3>
    </div>
</div>

Check out an example fiddle HERE

htmlcssalignmentw3cw3.css

Answer №1

flexbox has the capability to achieve this.

.custom-row {
    display: flex;
}

.custom-container {
    flex:1;
}

Check out the JavaScript Demo

Answer №2

To fix the issue, it is necessary to eliminate the CSS class w3-xxlarge from the <i>-tag that contains the circular glyph. This class causes a difference in line-height compared to the default line-height of other glyphs or text within the divs.

Additionally, I have included min-height: 20px; for the p-tags to address any lack of content.

Check out the JSFiddle demo here

Answer №3

Lately, I encountered a similar issue where using flexbox styling was not ideal due to compatibility issues with older browsers like IE9 and below. You can check the compatibility of flexbox at this link: http://caniuse.com/#search=flexbox

To solve this, I implemented a technique involving negative margins. Here is an example:

.w3-quarter {
    padding-bottom: 100px;
    margin-bottom: -100px;   
}

This method also works seamlessly with bootstrap grid rows!

For a hands-on demonstration, you can view the code in action on JSFiddle: JSFiddle

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

Enhancing page accessibility through the implementation of shortcuts

Greetings to all members of the community! I am currently in the process of improving a website by implementing better accessibility practices. I have some concerns regarding a page that displays a large number of repeated result blocks, each containing ...

htmlaccessibility

Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned. article { back ...

htmlcssdom

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

A guide on rotating loaders and inserting custom text within loaders using CSS

Seeking assistance to modify my code for creating a unique loader design. The inner loader needs to remain static with only top and bottom segments, while the middle loader rotates anti-clockwise and the outer loader rotates clockwise. Additionally, the ...

htmlcss

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax

Encountering an error while trying to load a CSS file in a React project using webpack due

I'm currently working on a React project that utilizes styled components, and I've been attempting to integrate a CSS file as part of the react-image-gallery package. Following the instructions provided, I included the css-loader and style-loade ...

javascriptcssreactjswebpack

What is causing myInterval to not be cleared properly?

const homeButton = document.getElementById('home'); window.myInterval = 0; const showHome = () => { console.log('showHome'); window.myInterval = setInterval(wait, 400) } const wait = () => { console.log('wait'); ...

javascripthtmlcsssetinterval

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

javascripthtmlqunit

Tips for organizing bower dependencies efficiently

I'm currently working on an HTML-based project and utilizing a bower.json file to manage all the dependencies: { "name": "MyProject", "version": "0.1", "main": "index.html", "dependencies": { "modernizr": "2.8.3", "classie": "1.0.1", ...

javascripthtmlnode.jsbower

Issue with VideoJS functionality on iPad

When attempting to incorporate an html5 <video> tag into my Salesforce web page, I stumbled upon a fantastic library called "Videojs" (). It fulfilled most of my requirements, but I encountered a problem when trying to play a video on an iPad. This l ...

ioshtmlipadsalesforcevideo.js

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

I am working on developing an HTML dialogue box to serve as a settings page for my program. Within this settings page, users can create a list of salespeople that can be later selected from a drop-down menu. My current objective is to incorporate a checkbo ...

javascriptjqueryhtml

Tips for locating a webpage element with Selenium?

click here for image driver=webdriver.Chrome() driver.get("https://compass.tinkoff.ru/") driver.maximize_window() driver.implicitly_wait(20) elem = driver.find_element(By.XPATH, '//button[text()="Open Full Map"]').click() tim ...

pythonhtmlselenium-webdriverelement

Exploring how CSS affects backgrounds in the Google Chrome browser

Having an issue with the background on my website. In Firefox and other browsers, the background appears much lighter and whiter compared to Chrome. This is the CSS code for my background: body {background:#ffffff url(../../images/background.jpg); direct ...

htmlcssgoogle-chromecolors

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

javascriptcssangularjs

Using jQuery to Fade Out a DIV from multiple dropdown menus

Is there a way to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are reverted back to the original ("None") selection? Any help would be appreciated. Thank you. *I have successfully implemented thisDIV fadeIn() using "change" whenever ...

jqueryhtmlcssfadeout

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...

htmlcss

Adjust various text lengths to fit web browser content

I am using a web browser within my Windows Form. I am populating it with text each time, with almost the same text size in each loop. The size of my web browser is fixed, and I want to automatically adjust the text content to fit the browser. For example, ...

c#csswebbrowser-control

Javascript eval function providing inaccurate results

I have encountered a problem while using eval() for a calculator I am developing. When I input the following code: console.log(eval("5.2-5")); The output is: 0.20000000000000018 I am confused as to why this is happening. Thank you for your assistance. ...

javascripthtmleval

Steps for linking a page to a modal without embedding the page's content within the modal

Here is a snippet of code for a modal (from Twitter Bootstrap) that I am currently working with: <!-- Large Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large Modal</button&g ...

javascriptphpjqueryhtmltwitter-bootstrap

Result array, employed as an input for auto-suggest functionality

I’m currently working with an array where I am iterating over an object from an API endpoint that is in stdClass format: foreach($searchResults->hits as $arr){ foreach ($arr as $obj) { $fullType = $obj->_source->categories; print_r($fu ...

javascriptphphtmlarraysautocomplete