How to have a header and a scroll section inside of a div element

Question

Hi I am creating a code where you can manage a sprinkler system. I would like it to have a modern look and the page to be visually appealing currently I have two sides/columns each column has boxes on it. Currently the boxes do not align with each other how I want. I would the bottom box on the left to be 5 px below the one on the top, not in line with the one on the write. I also want the boxes that say "Run History" to have a scrolling segment. The part that says Run History and the top of the table to be fixed. While the table elements are scrolling inside the div. The full code is on this codepen:https://codepen.io/masonhorder/pen/gyQmBG

Part of the code is here HTML

<div class="body">
  <div class="boxes">
    <div class="water box box-left">
      <h1>Water Saved</h1>
      <p>You Have Saved:<br><span class="huge">15</span><br> gallons of water</p>
    </div>
    <div class="water box box-right">
      <div class="fixed">
      <h1>Run History</h1>
      <table>
        <tr>
          <th>Date</th>
          <th>Schedule</th>
          <th>Run Factor</th>
        </tr>
        <tr>
          <td>April  22</td>
          <td>One</td>
          <td>0.8</td>

        <tr>
          <td>April  21</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  20</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  19</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  18</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  17</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  16</td>
          <td>One</td>
          <td>1.2</td>
        </tr>
        <tr>
          <td>April  15</td>
          <td>One</td>
          <td>1</td>
        </tr>
      </div>
    </table>
    </div>
  </div>













  <!-- column 2 -->
  <div class="boxes">
    <div class="water box box-left">
      <h1>Water Saved</h1>
      <p>You Have Saved:<br><span class="huge">15</span><br> gallons of water</p>
    </div>
    <div class="water box box-right">
      <div class="fixed">
      <h1>Run History</h1>
      <table>
        <tr>
          <th>Date</th>
          <th>Schedule</th>
          <th>Run Factor</th>
        </tr>
        <tr>
          <td>April  22</td>
          <td>One</td>
          <td>0.8</td>

        <tr>
          <td>April  21</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  20</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  19</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  18</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  17</td>
          <td>One</td>
          <td>1</td>
        </tr>
        <tr>
          <td>April  16</td>
          <td>One</td>
          <td>1.2</td>
        </tr>
        <tr>
          <td>April  15</td>
          <td>One</td>
          <td>1</td>
        </tr>
      </div>
    </table>
    </div>
  </div>
</div>

CSS

#blue{


color: rgb(38, 99, 242);
}

.huge{
  font-size:90px;
  font-weight: 900;
}

#name-link:hover{
  text-decoration: none;
}

.body {
  /* margin-left: 25%; */
  /* margin-right: 25%; */
}

.body{
  box-sizing: border-box;
}


.boxes::after {
  content: "";
  clear: both;
  display: table;
}

.boxes{
  width:100%;
}



.box{
  float: left;
}


.box{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid rgb(229, 229, 229);
  width: 35%;
  padding:1%;
  /* max-height: 300px;
  overflow: scroll; */
  margin-left:10%;
  border-radius: 25px;
  box-shadow: 8px 8px 4px rgb(247, 247, 247);
}
.box:hover{
  transition: 0.2s;
  box-shadow: 10px 10px 7px rgb(230, 230, 230);
  cursor:pointer;
}

.underline{
  text-decoration: underline;
}

td, th {
  /* border: 1px solid #dddddd; */
  text-align: left;
  padding: 8px;
}

th{
  border-bottom: 1px solid rgb(229, 229, 229);
}

table {
  width: 100%;
  text-align: right;
}

.scroll{
  /* height:200px; */
  overflow: scroll;
}

/* .fixed{
  position: fixed;
} */

score 1 · Accepted Answer · answered Apr 25 '19 at 01:40

So just to sum it up, you want the following, correct?

Vertical alignment of column content so that it moves up below each other and doesn't align with any content in the opposite column
Scrolling overflow on the tables in the "Run History" boxes, with the header being fixed when scrolling.

Alignment

I think you're confusing columns with rows. Rows are horizontal and columns are vertical. Is there any correlation between the two "Water Saved" boxes and the adjacent "Run History" tab? If not, I'd suggest wrapping the "Water Saved" boxes in one column, and the "Run History" boxes in another column. That way, you'd get the alignment you seek, by them being grouped together.

So it would be something like:

<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>

You'd need a bit of CSS to arrange them side by side like columns. I'd suggest the following:

.boxes {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding: 0;
}

.column {
    flex: 0 0 auto;
    width: 35%; /* To get the same orignal 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);
}

For displaying the columns side-by-side, I've used flexbox (display: flex;). If you're not familiar with it, I'd recommend looking into it if you're learning CSS. It provides a really nice way of arranging elements.

You also have to remove a bit of your current styling for this to work. Remove the following:

.boxes::after {
    content: "";
    clear: both;
    display: table;
}

I see you used it before to make the space between the boxes and the left and right side the same. But since we're using flexbox, the justify-content: space-evenly; property takes care of that.

Box scrolling

To do this, we only need to add a height related property to the scroll class you already created. We can either add height or max-height, so we make sure that the list has a limit where it should start scrolling.

I'd also suggest changing the overflow property to overflow-y just to make sure that we're only handling the vertical scrolling and not accidentally adding horizontal scrolling.

.scroll {
    max-height: 200px;
    overflow-y: auto;
}

After that, we can wrap the table element in the new scroll class, to add the scrolling:

<div class="water box">
    <h1>Run History</h1>
    <div class="scroll">
        <table>
            ...
        </table>
    </div>
</div>

Here's a full codepen forked from yours, with the changes mentioned above: https://codepen.io/Phoenix1355/full/PgxmaX

I hope this helps a bit.

thank you, exactly what i wanted. It should be easy to add a margin between the top and bottom boxes in the columns right? — Mason Horder, Apr 25 '19 at 03:45
is it possible that the table heads(th) could also be fixed with "run history" — Mason Horder, Apr 25 '19 at 03:47
oh, and is there a way to only have one column if the viewer is on a mobile device thanks so much — Mason Horder, Apr 25 '19 at 03:55
@MasonHorder Sure. Just add a vertical margin to the `.box` class. To make the table heads fixed too, it'd require a bit more CSS and some changes to the HTML to fix that. I've updated the codepen I listed to have that aswell. If you want a further explanation on how it works, I'd suggest looking at [this question](https://stackoverflow.com/questions/19559197/how-to-make-scrollable-table-with-fixed-headers-using-css) — Phoenix1355, Apr 25 '19 at 10:13
And finally, if you want to have it all display in a single column on mobile, just add a [media query](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) with the width you need, and then add the following property to `.boxes` class: `flex-direction: column`. This should display them in a single column on mobile. — Phoenix1355, Apr 25 '19 at 10:15

How to have a header and a scroll section inside of a div element

1 Answers1