Just to clarify, you are looking for the following adjustments, right?
- Vertical alignment of column content so that it stacks underneath each other without aligning with content from the opposite column
- Implement scrolling overflow on tables within the "Run History" boxes, with a fixed header during scrolling.
Alignment
It seems like there may be some confusion between rows and columns. Rows run horizontally while columns are vertical. Is there any connection between the two "Water Saved" boxes and the adjacent "Run History" tab? If not, I recommend placing the "Water Saved" boxes in one column and the "Run History" boxes in another column. This way, they will be grouped together and aligned as desired.
The structure could look something like this:
<div class="boxes">
<div class="column column-left">
<div class="water box">
<h1>Water Saved</h1>
<p>You Have Saved:
<br><span class="huge">15</span>
<br> gallons of water
</p>
</div>
<div class="water box">
<h1>Water Saved</h1>
<p>You Have Saved:
<br><span class="huge">15</span>
<br> gallons of water
</p>
</div>
</div>
<div class="column column-right">
<div class="water box">
<div class="fixed">
<h1>Run History</h1>
<table>
...
</table>
</div>
</div>
<div class="water box">
<div class="fixed">
<h1>Run History</h1>
<table>
...
</table>
</div>
</div>
</div>
</div>
To display the columns side by side, CSS adjustments are needed. The following CSS styling can be applied:
.boxes {
display: flex;
justify-content: space-evenly;
width: 100%;
padding: 0;
}
.column {
flex: 0 0 auto;
width: 35%; /* To maintain original width */
}
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid rgb(229, 229, 229);
padding:1%;
margin-bottom: 5px;
border-radius: 25px;
box-shadow: 8px 8px 4px rgb(247, 247, 247);
}
I have utilized flexbox (display: flex;) for arranging elements side by side. It provides a convenient approach for layout design.
In regards to box scrolling, adjust the scroll class by adding a height-related property such as height or max-height to limit the overflow. Additionally, change the overflow property to overflow-y to prevent unintended horizontal scrolling.
.scroll {
max-height: 200px;
overflow-y: auto;
}
Apply the scroll class to the table element within the "Run History" box to enable scrolling:
<div class="water box">
<h1>Run History</h1>
<div class="scroll">
<table>
...
</table>
</div>
</div>
For reference, here is a codepen example based on these modifications:
https://codepen.io/Phoenix1355/full/PgxmaX
I hope this explanation aids your process.