I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table.
The content in the left column is dynamic, so its height is unknown beforehand. The content in the right column (a Facebook feed) should adapt its height to match the left column and also be scrollable. This way, users can read all the content by scrolling within the column itself.
The goal is to make the right column equal in height to the left column on the screen while also making it scrollable independently.
Initially, both columns have equal heights, although there is an issue with borders extending outside the cells. Once the right column's content exceeds the space available, setting "overflow-y: hidden;" would enforce equal height but prevent scrolling. On the other hand, setting "overflow-y: scroll;" gives us a scrollbar, but the heights are not equal - defeating the purpose.
The question remains: How can I achieve both equal height and a functional scrollbar?
Various attempts like "height: auto;" and "height: 100%;" did not yield the desired outcome...
You can see the current situation in the screenshot below:
(source: test2468.nl)
The code structure is simple:
<table>
<col width="60%">
<col width="38.7%">
<tr>
<td>
[... Fill the left column/cell with dynamic content ]
</td>
<td id="fb-td" style="vertical-align: top;">
<div id="fp2-rechts">
<div class="faceb" id="fb-berichten2">
<h3 id="fb-kop2">ON FACEBOOK<br /></h3>
<?php echo do_shortcode('[custom-facebook-feed id="168766623258787"
num=16]'); ?>
</div>
</div>
</td>
</tr>
</table>
There may be extra wrapper divs inside the right table cell, which might not be relevant to this issue.
Thank you.