css: impossible to grow the pricing page

Question

check out this static tempalte from https://github.com/kybernetyk/medstime/tree/master/src/medstime/static

the page that I'm having trouble with is

https://github.com/kybernetyk/medstime/blob/master/src/medstime/static/plans-pricing.html

Inside the <aside> tag, when you try to increase the number of items, the <div class="grid"> stays fixed in height and size!

I've literally tried everything from setting height on it but it is impossible to grow the container as I add more content inside it.

Answer 1

I apologize in advance if you have already tried this. But I looked in the CSS code under saas-common.css and found this:

.grid aside {
    width: 125px;
    float: left;
    padding-top: 110px;
    text-align: right;
}

.grid aside li {
    line-height: 51px;
    font-size: 14px;
}

.grid .sections {
    width: 782px;
    height: 511px;
    background: url(../images/bg-grid-box.png) no-repeat left top;
    float: right;
}

.grid section {
    float: left;
    text-align: center;
    height: 509px;
}

Looks like there are some fixed heights under the grid div. You could try overriding with !important.

A few things to try from there:

min-height: 500px;
height:auto;

Then,

overflow:hidden;

And if all else fails,

position:absolute;