Creating a pseudo table layout using only CSS by matching the heights of <div> elements in two separate stacks

I'm facing an issue with two stacked "columns" of divs that are supposed to be side by side, each representing a table row. However, if one div in the left column has more content lines than its corresponding div on the right side, the rows get misaligned. I'm looking for a way to set the height of these divs so they match each other.

Check out this picture for reference, where you can see the problem occurring in the third row.

This setup is within a Mediawiki farm environment, and due to certain constraints from both Mediawiki and the extensions used, I am unable to access the HTML directly or create a traditional table. Therefore, I'm seeking a CSS-only solution. I've explored using calc() and variables in a stylesheet, as well as tried display:table but haven't been able to figure it out.

<!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

<!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

<!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
      
    // Other ability descriptions go here

  </section>
</section>

Currently, the CSS just sets the two sections to 50% width and floats them left (along with some other non-critical styles).

css

Answer №1

To achieve the desired result, one could resort to complex JavaScript calculations and manually adjusting div heights in the code.

However, I would recommend opting for a simpler solution by utilizing CSS flexbox properties.

For more information on flexbox, refer to A Complete Guide to Flexbox.

.prop { display:flex; }
.key { flex-shrink:0; flex-grow:0; flex-basis:25%; }
<section class="header">
  <h2> Attributes </h2>

  <section class="content">
    <div class="prop">
      <div class="key"> Darkvision </div>
      <div class="val"> The helm allows the wearer to see in dim light. </div>
    </div>
    <div class="prop">
      <div class="key"> Thick Skin </div>
      <div class="val"> Grants immunity to poison. </div>
    </div>
    <div class="prop">
      <div class="key"> Invulnerability </div>
      <div class="val"> Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf </div>
    </div>
    <div class="prop">
      <div class="key"> Shapeshift </div>
      <div class="val"> The helm gives the wearer the ability to take any form. </div>
    </div>
  </section>
</section>

Answer №2

When designing your HTML code, consider using grid layout without JavaScript as an alternative:

  • An example would be setting each row to the same height, although some may appear empty unless shorter content can be centered.

body>section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 800px;
  max-width: 100%;
  margin: auto;
}

body>section>h2 {
  grid-column: 1/ span 2;
}

body>section>section {
  display: grid;
  grid-auto-rows: 1fr;/* here is the handy part */
  border: solid 1px;
}

section>div {
  border: solid 1px;
  padding: 0.15em
}


/* only for the demo and a touch of flex ;)  */

section>section>div {
  display: flex;
  align-items: center;
}

section>section:first-of-type>div {
  justify-content: center;
}
<!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

  <!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

  <!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

  • Try using display:contents to virtually make divs direct children of the parent section with a grid layout. Rows will match their max-content, but this is a workaround/trick that not all browsers support:

body>section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 800px;
  grid-auto-flow: row dense;
  max-width: 100%;
  margin: auto;
}

body>section>h2 {
  grid-column: 1/ span 2;
}

body>section>section {
  display: contents
}

section>div {
  border: solid;
}

h2+section>div {
  grid-column: 1;
}

h2+section+section>div {
  grid-column: 2;
}
<!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

  <!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

  <!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

Javascript can be useful, but consider reevaluating the structure of your HTML.

I wouldn't recommend using the display:contents method due to limited browser support. See compatibility at https://caniuse.com/css-display-contents

Here's a tip: If your content remains readable and understandable without styling, then your document is well-structured. If everything looks jumbled, search engines and other readers might struggle to interpret it correctly.

Lastly, my personal opinion regarding your question (feel free to skip):

Your content appears suitable for a proper HTML table. Using a genuine table for such information can be more appropriate, and there are ways to make tables responsive if necessary.

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

Struggling to align divs in HTML using CSS

Struggling with aligning my divs in the center of the parent div and keeping them inline. I have a parent "page" containing 6 other divs - "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06". They sit inline when the window is small, but when it's re ...

htmlcss

How to Vertically Align a div in the Center using Bootstrap 5

Is there a way to horizontally center a div using bootstrap 5? I want the div to be positioned in the middle, between the content above it and the end of the screen. I attempted the following: <div>some content</div> <div class="d-flex ...

htmlcssbootstrap-5

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

htmlcssbootstrap-4

Jssor Slider: Captions briefly overlap just as the slideshow begins to play

I am currently working on a slideshow with 3 caption-only slides. Here is the code snippet: <div id="sliderHeader_container" style="position: relative; width: 965px; height: 85px;"> <!-- Slides Container --> <div u="slides" style=" ...

jqueryhtmlcssjssor

Building a Compact Dropdown Menu in Bootstrap

I am looking to implement a compact Bootstrap dropdown feature, but I am unsure of how to do it. Take a look at this image for reference. base.html: <a class="text-light" data-bs-toggle="dropdown" aria-expanded="false&qu ...

htmlcssdrop-down-menudropdownbootstrap-5

Is there a way to dynamically alter the heading color in Shopify liquid code?

After utilizing ChatGPT to review the code, I am uncertain if it is related to the color schemes. I am unsure of what I may be missing or doing incorrectly. While I can successfully alter the heading text, I am unable to change the color. Below is the code ...

htmlcssjsonshopifyliquid

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...

javascriptjqueryhtmlcss

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

javascriptjqueryhtmlcssdrop-down-menu

The ellipsis styling is being ignored

Check out the code provided below. It pertains to the text box located in the top right corner, which reveals a drop-down box when clicked. My intention is for long text in this box to be truncated with ellipsis using text-overflow:ellipsis. From my unders ...

htmlcsstwitter-bootstrapbootstrap-4

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging. This is how my HTML code looks: <html> < ...

javascriptjqueryhtmlcss

Gif stubbornly refusing to fade out even after the .fadeOut command is called

Having trouble making a gif fade out after the page loads? Here's my attempt so far: I want the overlay, which includes a white background and the gif, to gradually become transparent once the rest of the page is fully loaded. Take a look at the fol ...

javascriptjqueryhtmlcss

CSS appears distorted with unusual symbols

When I open my index.html and global.css files in Coda, Textmate, or other text editors, everything appears fine. However, when I try to view them in Firefox, the index.html file loads the CSS from the correct path but it doesn't seem to take effect. ...

htmlcsscharacter-encoding

Having trouble adjusting the grid's width property

My personal page features a section dedicated to displaying my skills and proficiency in various programming languages (although it may not be entirely accurate). I am struggling to adjust the width of the Skill grid to match the layout of the other grids ...

javascripthtmlcssgridwidth

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

cssangulartypescriptfrontend

The stylish overflow feature in CSS

After reviewing various CSS templates, I noticed that some classes contain the overflow:hidden property without a defined size. As far as I understand, block elements typically expand to accommodate their content unless instructed otherwise. Given this, ...

cssoverflow

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

javascriptphpjqueryhtmlcss

Identify Xoom Browser on Android devices

Is there a way to target the Motorola Xoom browser using CSS Media Queries? For example, I can target iPad with @media only screen and (device-width:768px) What would be the equivalent media query for detecting the Motorola Xoom browser? ...

androidcssbrowsermedia-queries

Difficulty arises in designing a tableless layout due to the issue of auto

Wondering why my page is not expanding with its content? Check out my demo on Fiddle http://jsfiddle.net/msas3/. The light blue area should determine the overall height of the page. ...

csslayoutcss-floathtml

Creating a sticky footer using Vue.js for both mobile and desktop display views

Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...

htmlcssvue.jsfooter

Updating code to insert elements into an array/data structure using Javascript

Hey everyone, I'm new to Javascript and I'm trying to make a change to some existing code. Instead of just returning the count of elements, I want to add each of the specified elements to an array or list. Here is the original code from a Seleni ...

javascriptpythoncssselenium