Achieving proper stacking of a table with other div elements

Question

Achieving proper stacking of a table with other div elements

I've come across some similar inquiries, but none seem to fully address the specific issue at hand. If there's an existing thread on this that I overlooked, I apologize in advance.

So, here's a multi-part problem: my solution for the first part has inadvertently caused a second issue.

I have a 4-column layout where the contents must maintain uniform height, like so:

https://i.sstatic.net/tRdY2.png

The second and fourth boxes should have background colors and need to match the height of the other two, which will be images. Currently, the most reliable way I found to achieve this is by structuring it as a table and setting the cell height to 100%, as shown below:

<table>
 <tbody>
  <tr>
   <td style="width: 25%;">
   <figure><img alt="" class="img-responsive" src="http://lorempixel.com/1000/1000/business" /></figure>
   </td>
   <td class="bg-brand-dark" style="height: 100%; width: 25%;">
   <div class="block-padding-hor">
   <h3 class="text-inverse h6"><strong>Featured Corporate News</strong></h3>

   <hr class="rule-part--bright center-block" />
   <p class="text-inverse h6">Hardly Dude, a new 'vette? The kid's still got, oh, 96 to 97 thousand, depending on the options.</p>

   <p class="text-center"><a class="currentURL" href="">Continue Reading</a></p>
   </div>
   </td>
   <td style="width: 25%;">
   <figure><img alt="" class="img-responsive" src="http://lorempixel.com/1000/1000/business" /></figure>
   </td>
   <td class="bg-gray-dark" style="height: 100%; width: 25%;">
   <div class="block-padding-hor">
   <h3 class="text-inverse h6"><strong>Featured Corporate News</strong></h3>

   <hr class="rule-part--bright center-block" />
   <p class="text-inverse h6">Hardly Dude, a new 'vette? The kid's still got, oh, 96 to 97 thousand, depending on the options.</p>

   <p class="text-center"><a class="currentURL" href="">Continue Reading</a></p>
   </div>
   </td>
  </tr>
 </tbody>
</table>

This resolved the initial problem effectively but led to a new complication. Any additional content placed below this markup gets obscured by the table above it, as illustrated in the undesired scenario below:

https://i.sstatic.net/XiVk2.png

Therefore, my question is: is there a reliable method to prevent this overlap? I initially assumed a table would act like a block element and stack accordingly, but apparently, that's not the case. Thank you in advance for any guidance, even if it involves blunt feedback along with a link to an existing thread addressing the issue!

::EDIT::

I omitted the CSS since it likely doesn't affect this issue, but if necessary for clarity, feel free to request it and I'll provide it.

::EDIT 2::

As requested, here's the CSS code, although it mainly involves setting background colors and centering elements:

<style>
  .img-responsive {
    max-width: 100%;
  }


  .bg-brand-dark {
    background-color: #004892;
  }


  .block-padding-hor {
    padding-left: 30px;
    padding-right: 30px;
  }


  .rule-part--bright {
    border: 2px solid #08b5fe;
    width: 50%;
  }


  .center-block {
    margin: 0 auto;
  }


  .text-inverse {
    color: #ffffff;
  }


  .h6 {
    font-size: 13px;
  }


  .text-center {
    text-align: center;
  }

  .bg-gray-dark {
    background-color: #4D4F53;
  }

</style>

html css html-table flexbox

Answer 1

Answer №1

After thorough investigation in the development tools, I finally pinpointed the issue. Surprisingly, it was not part of my initial markup but rather embedded within the content management system I was using.

The previous DIV element had a specific "max-height" property assigned to it with a pixel value. This caused the table content to overflow into the section below. The solution turned out to be quite simple, hiding in plain sight just outside my immediate focus.

Answer 2

After thorough investigation in the development tools, I finally pinpointed the issue. Surprisingly, it was not part of my initial markup but rather embedded within the content management system I was using.

The previous DIV element had a specific "max-height" property assigned to it with a pixel value. This caused the table content to overflow into the section below. The solution turned out to be quite simple, hiding in plain sight just outside my immediate focus.

Answer 3

Answer №2

In the past, tables were commonly used to create layouts with equal height columns.

But with the introduction of CSS Flexbox, achieving the same result requires less code and offers more flexibility.

There are multiple ways to achieve equal height columns using flexbox:

Utilize the flex-grow property
This property determines how much space an item should occupy within the flex container. By setting flex-grow: 1 (or using flex: 1 shorthand), the boxes will always fill up all available space in the container, ensuring equal heights regardless of content size or quantity.
Use the align-items property.
This property controls how flex items distribute available space along the cross axis. The default value is stretch, which expands each item across all available space, thereby keeping the boxes at equal heights by default.
Apply the min-height property to the flex container.

HTML

<article id="container">
    <section class="box">1</section>
    <section class="box">2</section>
    <section class="box">3</section>
    <section class="box">4</section>
</article>

CSS (excluding decorative styles)

#container {
    display: flex;
    justify-content: space-around;
    min-height: 250px;
}

.box {
    display: flex;
    flex-direction: column;
    width: 20%;
    min-height: 200px;
    box-sizing: border-box;   
    overflow: auto;
}

.box:nth-child(even) {
    background-color: aqua;
}

DEMO

In the demo, any amount of content added to one box - including images - will result in all sibling boxes adjusting their height accordingly.

Note that flexbox is now supported by all major browsers, except for IE 8 & 9. Some newer browser versions like Safari 8 and IE10 may require vendor prefixes. To easily add all necessary prefixes, consider using Autoprefixer. More information can be found in this answer.

Answer 4

In the past, tables were commonly used to create layouts with equal height columns.

But with the introduction of CSS Flexbox, achieving the same result requires less code and offers more flexibility.

There are multiple ways to achieve equal height columns using flexbox:

Utilize the flex-grow property
This property determines how much space an item should occupy within the flex container. By setting flex-grow: 1 (or using flex: 1 shorthand), the boxes will always fill up all available space in the container, ensuring equal heights regardless of content size or quantity.
Use the align-items property.
This property controls how flex items distribute available space along the cross axis. The default value is stretch, which expands each item across all available space, thereby keeping the boxes at equal heights by default.
Apply the min-height property to the flex container.

HTML

<article id="container">
    <section class="box">1</section>
    <section class="box">2</section>
    <section class="box">3</section>
    <section class="box">4</section>
</article>

CSS (excluding decorative styles)

#container {
    display: flex;
    justify-content: space-around;
    min-height: 250px;
}

.box {
    display: flex;
    flex-direction: column;
    width: 20%;
    min-height: 200px;
    box-sizing: border-box;   
    overflow: auto;
}

.box:nth-child(even) {
    background-color: aqua;
}

DEMO

In the demo, any amount of content added to one box - including images - will result in all sibling boxes adjusting their height accordingly.

Note that flexbox is now supported by all major browsers, except for IE 8 & 9. Some newer browser versions like Safari 8 and IE10 may require vendor prefixes. To easily add all necessary prefixes, consider using Autoprefixer. More information can be found in this answer.

Achieving proper stacking of a table with other div elements

Answer №1

Answer №2

Similar questions

Looking to reset the default display option in a select dropdown using JavaScript or jQuery?

What is the process of linking this JavaScript code to an outer stylesheet and integrating it with the HTML document?

Closing the dropdown menu by directly clicking on the button

Modifying the order of Vuetify CSS in webpack build process

Issue encountered when trying to import an image URL as a background in CSS using Webpack

Place a picture and words within a submit button

Extraction of Canonical URLs

What is the best way to adjust the width of a column grid header in extjs

jQuery selector unable to locate the specified class in the table row

What is the best way to create a button that can show or hide an unordered list with a click?

Implement various actions when the window is resized

A crisscrossing dashed design running along the edges of the text block

Is there a reason the hr tag elements aren't extending to the full width within the list?

dividing Handlebars HTML content into different files or sections

display a dual-column list using ngFor in Angular

"JQuery event handlers not functioning as expected: .click and .on failing

Tips for creating a div that slides from the right side to the left side

What is the best way to conceal a CSS div through PHP if the div is empty?

I believe the term for this is an inline text alignment: center, but for some reason, I am unable to make it function properly within

Optimize your HTML with Meleze.web's ASP.NET MVC 3 Razor minification and compression features