What is the best way to ensure that the columns are the same height, regardless of the varying content they contain

Visit my CodePen

For this particular layout, I need to use only CSS. The columns are structured like so:

<div class="col-md-12 no-border no-padding">
  <h2 class="heading upper align-center">Headline</h2>
  <p class="subheading lower align-center">Ensure the first impression is incredible</p>
  <div class="help-link align-center upper margin-b-5">
    <p class="mini-help">Need assistance? Check out this video&nbsp;&nbsp;
    <div class="help">
      <div class="hvr-grow"><i class="icon-camrecorder"></i></div>
    </div>
    <p class="mini-help upper align-center margin b-5">&nbsp;&nbsp;quick video demonstration.</p>
  </div>
</div>
htmlcss

Answer №1

It appears that you have successfully utilized the .row-eq-height class to ensure all columns have equal heights. However, it seems you overlooked the presence of another .col-md-12 within each column, which adjusts its width based on the content inside. To resolve this, simply apply height:100% to make it match the parent's height instead!

Check out Codepen Demo

Update in CSS:

.headlines .row-eq-height > div > .col-md-12{
  height:100%;
}

Answer №2

Although this question has been answered before, I am sticking with my original response.

I made some adjustments by introducing additional selectors and flex rules to ensure that all boxes are the same height when displayed in a row. You can view the updated code on this link.

/* UPDATED CSS */

div.row,
.row > div {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
}
.row > div {
  flex-flow: column;
  flex: 1 0 auto;
  margin-bottom: 0;
}
.row > div > div {
  flex: 1 1 50%;
}

.multi-summ.align-center.bcolor-white {
  margin-bottom: 2rem;
}

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

Adding URL path instead of overriding it

Could someone assist me with the dynamic routing while organizing pages in folders within Storyblok? Currently, I am facing an issue where the slug folder name is being appended to all the links displayed in the header. So, when a user clicks on a blog po ...

htmlvue.jsvuejs3nuxtjs3storyblok

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Selecting parent class using JQuery

This is some HTML I have: <label class="rlabel">First Name</label> <input class="rinput" type="text" placeholder="Fisrt Name" required /> <label class="rlabel">Last Name</label> <input class="rinput" type="tex ...

jquerycss

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternatively, I could use a background im ...

htmlcss

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

javascriptjqueryhtmlcss

Arranging data into columns using HTML and CSS

I'm currently working on a CSS solution to organize various elements like buttons and text in a tabular column format. My main challenge lies in controlling the layout effectively, especially since CSS columns are not compatible with IE9 and earlier v ...

htmlcss

Discovering if a div element has children using Selenium IDE

As I begin to automate testing for our website with Selenium IDE, I must admit that I am still learning the ins and outs of it. We utilize highcharts to exhibit data on our site. The challenge arises from the fact that there are 3 div elements handling th ...

htmlcssseleniumhighchartsselenium-ide

Concealing an element upon clicking with jQuery

Can someone help me with this issue? I'm trying to use jQuery to hide the div element with the ID 'professional-panel' when a button with the ID 'hideButton' is clicked. I know it should be simple, but I'm new to jQuery and s ...

jqueryhtml

Ways to show the existing value of a <select> in a label without altering the function

I currently have a label that changes to display the selected option from a dynamic select dropdown, but it only updates when the selection is changed. I would like it to also display the current value when the page first loads. I attempted to change &apos ...

javascriptjqueryhtmlcssselect

Incorporating an iframe seamlessly into a div element with scroll functionality

To start off, you can find the code in this JSFiddle link I am attempting to include an iframe as if it were a div. I understand how to do this with a regular iframe, but the one I am using contains a slider, resulting in two vertical scroll bars appearin ...

htmlcssiframe

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

javascripthtmljqueryajaxlaravel

Is this loader going through a triple loop?

<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-repeat: no-repeat; background: url('images/page-loader.gif'); } </style> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascripthtmlcsstwitter-bootstrap-3

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

htmlbuttonhideshow

Trouble with JavaScript loading in HTML webpage

<!DOCTYPE html> <html> <head> <title>Breakout Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas width="900" height="450" class="canvas"></canvas> ...

javascripthtmlcssdom

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

I am working on a project that involves an HTML section where a user can choose a billing term from a drop-down list. I am in the process of writing JavaScript code to capture the selected option value and use it in another part of the webpage. Here is a ...

javascriptjqueryhtmlcssselect

Wordpress Sub-Menu Being Eclipsed by Banner

After upgrading my Wordpress to version 3.5.1, I noticed a problem on my site where the Submenus are loading but quickly getting hidden behind the Banner. Despite trying various modifications in the CSS file, the issue remains unresolved (and might have wo ...

csswordpressmenu

Is using the <a> tag in HTML5 detrimental to SEO?

Recently, I've been experimenting with using the <a> tag as a container in HTML5. It's interesting to note that this tag can now have block elements as children. Take a look at this transformation: before (valid XHTML 1.1) <div> ...

htmlseo

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

javascripthtmlinputshow

struggling to develop a sophisticated 'shopping cart organization' program

I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...

javascriptjqueryhtml

Creating CSS wrappers around div elements of varying sizes

I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below: <div id = "div1"></div> <div id = "div2"></div> <div id = ...

csshtmlcss-float