Home/ Questions/Q 7598247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:21:39+00:00

Of all the CSS issues out there, the height paramaters – which should be

  • 0

Of all the CSS issues out there, the height paramaters – which should be fairly easy – always vex me.

I’m developing a calendar component for a ExpressionEngine-driven client website. I’m using SolSpace’s Calendar plugin (which is fantastic on the back end, BTW), and the templates that comes with it is table-based.

I wanted to make a CSS-based template and I’m stuck on how to manage the height of the cells.

Here’s what it looks like now: http://cornerstonearts.hostasaurus.com/calendar

Initially, I set up the cells so that they would expand when the number of events exceeded the available space. I did it as you would expect: min-height:100%; overflow-y:hidden;

I also applied the same settings to the containing DIVs, which make up each week row, and the month container.

The problem was that empty cells collapsed completely, while overflowing cells expanded independently of one another. The latter pushed open the week rows appropriately, but the other day cells within that row would not expand to fill them. As a result, the borders were all out of whack (see attachment).

So I changed the min-height to 120px, but then they don’t expand at all. I also tried a combination of height:120px; min-height:100%; overflow-y:hidden; but that didn’t work, either.

How do I make it so that the cells expand, and expand the other days in the week with them, when needed, but retain a minimum height when they are empty.

As always, I am super appreciative of any assistance.

Thanks,

ty

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You say the templates are table-based. Do you mean html tables exactly? If so I would put the borders you have on your screenshot on the <td>s not on the divs.

    The trouble with css is that individual <div>s don’t know what the height of each other are unless they are nested inside each other which is an unworkable solution for what you are trying to achieve.

    Actually, if it’s an events calendar then it is tabular data, it’s a table of events. There is nothing wrong with tables per se. Just using them like people did in the old days to lay out an entire website.

    • 0