How to dynamically fill empty space in a column

Question

I have a table with three columns. The content of column 1 is dynamic. It's a schedule for the day so every day the length of text changes. Column 2 is also dynamic but does not change as frequently maybe a few times a month. Column 3 is static, I change the information manually.

The problem is that every day one of the columns could have empty space. On any given day column 1 could be longer or shorter then the other two columns. What I want to do is dynamically fill the empty space no matter which column needs it so that all three are somewhat balanced looking.

The text in each column has a div wrapper. My thought is another div at the end of each column that could be filled with text or an image and would automatically shrink or grow depending on the overall height of the table.

I've searched different HTML/CSS properties but haven't found a solution yet. Maybe I'm asking too much but hoping someone has done something similar to this. Most news sites seem to do this well even within sections. Their columns look balanced.

I don't know how this would work server side as it needs to know the final height but if you do have a solution that way I use VB but also Javascript if client side. But I'd think there would be a CSS way.

EDIT: I'm referring to the HEIGHT of the column only, column widths are fixed. Searching google all I could get were solutions for width too so maybe what I'm asking for can't or hasn't been done. I'm referring to the amount of text that fills up the HEIGHT of the column. For simplicity lets say column 1 is the only one that changes. But the amount of text that fills the HEIGHT of column 1 could be more or less than what fills up the other two columns leaving a blank area either in column 1 if it has less text or a blank area in the other two columns if it has more text than either of the other two. Hope that clears it up :)

Answer 1

You're not specifying what you want the remainder of the columns to be filled with, so I'm assuming that they can be just random images.
In that case, the solution is to assign a background image to each td and to give the divs inside a solid background. That way, the height of the table is just its natural height (the height of the largest text) and no extra tricks are necessary.

body {background:#FFE}
table {
  border: 1px outset gray
}
td {
  border: 1px inset gray;
  width: 33.3%;
  vertical-align: top;
  padding: 0;
}
td:first-child {
  background: url(http://lorempixel.com/600/900) repeat;
}
td:first-child + td {
  background: url(http://lorempixel.com/600/901) repeat;
}
td:first-child + td + td {
  background: url(http://lorempixel.com/600/902) repeat;
}
td > div {
  background: #FFE;
  padding: .33em
}

<table>
  <tr>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </td>
  </tr>
</table>