Adjustable / consistent box height

For hours, I've been attempting to make some divs the same height.

Check out my JSfiddle here:

https://jsfiddle.net/4cj5LbLs/15/

I experimented with using display: table; in the parent element and either display: table-cell; or display: table-column; in the child elements, as shown in the fiddle. However, the divs still don't end up with equal heights.

I did come across a solution using flexbox, but it's not compatible with IE9 and lower versions, and I want to ensure maximum compatibility.

Is there a way to achieve this with CSS tables, or am I going about this the wrong way?

Thank you for any assistance you can offer.

*Edit: Just a heads up that I only want the columns to have equal height when they are next to each other in a row. Once the screen width is below 800px, the columns stack and adopt their individual content heights.

htmlcsslayout

Answer №1

If you want to achieve this layout, consider using flexbox. Make the following changes in your HTML code:

Updated HTML Code

<div class="row">
    <div class="full-width-container">
        <div class="full-width-wrapper">
            <div class="full-width">
                Your content goes here
            </div>
        </div>
    </div>
</div>

<!-- Repeat the similar structure for different column layouts -->

CSS Styling

/* General styling for columns */

.row {
  padding: 20px;
  display: flex;
  width: 100%;
}

.row div {
  /* min-height: 200px; */
}

/* Styles for full-width container */

.full-width-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  width: 100%;
}

.full-width-wrapper {
  background-color: rgb(255, 255, 255);
  padding: 10px;
}

.full-width {
  background-color: rgb(225, 221, 213);
  padding: 20px;
  height: auto;
}

/* Styles for three columns layout */

.three-columns-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  float: left;
  width: 30.6666%;
  display: table-cell;
}

/* Update styles for other column layouts as needed */

@media screen and (max-width: 800px) {
  /* Update styles for responsiveness */
}

@media screen and (max-width: 650px) {
  /* Adjust styles for smaller screens */
}

/* End of column styling */

Answer №2

To optimize your display-table, avoid using margins or floats as they can disrupt the table layout.

Regrettably, I didn't include the @media queries due to time constraints. Hopefully, the provided code will still serve as a good starting point for you.

IMPORTANT: An empty table-cell with the given code will cause alignment issues. To correct this, use &nbsp; instead.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
  padding: 20px;
  border-collapse: separate;
  border-spacing: 50px;
}
.row {
  width: 100%;
  display: table-row;
}
.cell-wrapper {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  width: 33%;
  display: table-cell;
}
.cell-padding {
  height: 100%;
}
.cell-content {
  background-color: rgb(225, 221, 213);
  border: 10px solid #fff;
  padding: 20px;
  height: 100%;
}
<div class="wrapper">
  <div class="row">
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        </div>
      </div>
    </div>
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        </div>
      </div>
    </div>
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

When flex is not being used, it is necessary to enclose the table-cell within a container set to display:table-row;.

If the width for table-cell is not specified, their widths may vary to reduce the height. To maintain consistent widths, simply add width to each of them.

Take a look at this example:

.container{
  width:100%;
  margin:0;
  padding:0;
  display:table;
}
.row{
  width:100%;
  margin:0;
  padding:0;
  display:table-row;
}
.inside{
  display:table-cell;
  padding:20px;
  box-sizing:border-box;
  border:1px solid;
}
<div class="container">
  <div class="row">
  <div class="inside one">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="inside two">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
  </div>
  <div class="inside three">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  </div>
    </div>
</div>

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

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

Preventing Text Truncation in THREE.js Texture Created from 2D Canvas

Many people tend to use the 2D canvas texture method for creating text billboards, sprites, and overlays in THREE.js scenes instead of relying on imported image files. You can check out an example by Lee Stemkoski here. However, I have noticed that when a ...

javascripthtmlcanvasthree.js

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

javascriptphpjqueryhtmlajax

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Maintain the button's color when clicked UNTIL it is clicked again

I am facing a challenge where I need to dynamically select multiple buttons that change color upon click. Once a button is clicked, it should change color and if clicked again, revert back to its original color. Unfortunately, I cannot rely on HTML attribu ...

javascripthtmlvue.jsbuttonbootstrap-4

Clicking on a radio button can trigger the selection of another radio button

I'm currently working on a form that includes 8 radio buttons - 4 for System A and 4 for System B. The options for the buttons are CF, ISO, ISO-B, and NW. My goal is to create a functionality where selecting a radio button in System A automatically se ...

javascripthtml

Modifying the chart width in Chart.js: A step-by-step guide

After creating a chart using Chart Js, I encountered an issue where the chart did not fit within the specified width. Adjusting the attributes of canvas proved to be ineffective, specifically with regards to the width attribute. Despite changing the value, ...

javascripthtmlcsschartschart.js

Choose a tag in order to connect to a different page when an event occurs in Rails

Working on my first complete stack rails application! I am trying to implement a select dropdown menu that will direct users to a specific show page within the app. Each option represents a different college with its own individual show page. I am struggl ...

htmlruby-on-rails

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups The goal is to keep the height of the box consistent even when the description varies Here's my codepen link : https://codepen.io/po ...

cssvue.jsvue-componentvuetify.js

transfer the form file to php using ajax requests

I am trying to send a file to PHP using AJAX. Below is the code I have written, but when I run it, I get an error saying "Undefined index: thefile". Can anyone help me identify the problem? HTML function sendData(url){ var xmlHttp = new XMLHttpRequ ...

phphtmlajax

Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...

cssflexbox

Is it usual for the container to overflow with div content?

Is this common CSS behavior? How can we make the container wrap around the button? http://jsfiddle.net/afrontrow/yepw7oLw/ CSS: .button { background: grey; padding: 10px 20px; } .container { border: 1px solid black; } HTML: <div class= ...

css

Struggling with properly navigating a JSON file in my JavaScript code... specifically trying to access and retrieve the "responseObject.weather[i].weatherresponseObject.weather[i].description" data

Struggling with extracting data from a PHP file in JSON format to display on an HTML file using JavaScript. I seem to be encountering issues with accessing responseObject.weather[i].weatherresponseObject.weather[i].description, and I suspect it might be d ...

javascripthtmlajax

Tips for extracting and utilizing the values of multiple checked checkboxes in a jQuery datatable

When a button is clicked, I am trying to retrieve the selected values of multiple rows from the datatables. However, with my current code below, I am only able to get the value of the first selected row. function AssignVendor() { var table = $(assig ...

javascriptjqueryhtmlcheckboxdatatables

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

How to update icon for fa-play using Javascript in HTML5

I recently added an autoplay audio feature to my website. I would like to implement the functionality to pause and play the music, while also toggling the icon to fa-play at the same time. This is the HTML code I am using: <script type="text/javascri ...

javascripthtml

How can I retrieve all the data for the chosen item in a mat-select within a mat-dialog, while still preserving the code for setting the default selected value

In my modal dialog, I have a dropdown menu populated with various languages. The ID of the selected language is bound to the (value) property for preselection purposes when data is passed into the dialog. However, I am looking for a way to also display the ...

htmlangularangular-material

to return the value to default when deactivating the text input field

Implementing typeahead functionality on two input fields: <div class="form-group> <label class="control-label=">Product Code:</label> <input placeholder="Enter Value" type="text" class="form-control" ng-model="a.product ...

htmlangularjs

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Quick CSS tweak

Below is my CSS code: .wrapper { display: inline-block; margin-top: 60px; padding: 15px; width: 100%; } I am looking to create a new class that inherits all the properties from wrapper and only changes the width property: .wrapper .exten ...

htmlcss