I am currently in the process of developing a webpage with dual columns. The two columns are segregated into div containers, one labeled right and the other labeled left. These columns reside within a parent div called row, which is nested within a main div named table.
<div id="table">
<div id="row">
<div id="left">
</div>
<div id="right">
</right>
</div>
</div>
The CSS code I have implemented facilitates the creation of these two columns.
#table
{
display:table;
width: 100%;
}
#row
{
display:table-row;
width: 100%;
}
#left
{
display:table-cell;
width: 50%;
}
#right
{
display:table-cell;
width: 50%;
}
This setup functions seamlessly. However, I am now looking to embed a sub div inside the left column that enables horizontal scrolling of images without altering the width of either the right or left columns, both of which occupy 50% of the screen.
If anyone could provide guidance on achieving this specific layout structure, particularly regarding the implementation of a scrollable image container within the left div, I would greatly appreciate it. Thank you for your assistance.