Column height issue.

I have created a 16 column grid system that is being used in the main content area of my page. the header and footer are in separate containers outside of the grid system.

In the main content area i am only using 2 grid- containers. grid-2 and grid-14. Grid-2 is a the main nav on the left side of the page. Grid-14 is the main content area and is on the right. The header and footer are static.

both the grid-2 and grid-14 have different background colors. The grid-14 have a lot of content while the grid-3 only has a few nav items.

What is happening is the nav background is not filling to the full column to the same height as the grid-14. I need the nav grid background to fill the entire height of the column.

I have tried the height property in multible areas of the css and it just wont work.

grid.css

/* =========================================== **** Grid system layout **** General site config, body and other general settings. ============================================*/

/* Global Containers =============================================*/ .grid-container { padding-right: 5px; margin-right: auto; margin-left: auto; }

/* Media Queries =============================================*/ @media (min-width: 1px) and (max-width: 840px) { .grid-container > [class^="grid-"] { padding-right: 5px; }

    .hide-mobile {
        display: none;
    }
    }

@media (min-width: 1300px) { /* Columns ============================================*/ .grid-container > [class^="grid-"] { float: left; min-height: 1px; padding-right: 10px; height: 100%; } .grid-container > [class^="grid-"]:first-child { min-width: 110px; margin-left: 0; padding-top: 5px; padding-bottom: 5px; height: 100%; } .grid-container > [class^="grid-"]:last-child { float: right; }

    /* Columns are 50px wide, with 15px gutters
    =========================================== */
    .grid-1 {
        width: 4.80%;
        }
    .grid-2 {
        width: 11.05%;
        }
    .grid-3 {
        width: 17.30%
        }
    .grid-4 {
        width: 23.55%;
        }
    .grid-5 {
        width: 29.80%;
        }
    .grid-6 {
        width: 36.05%
        }
    .grid-7 {
        width: 42.30%;
        }
    .grid-8 {
        width: 48.55%;
        }
    .grid-9 {
        width: 54.80%
        }
    .grid-10 {
        width: 61.05%;
        }
    .grid-11 {
        width: 67.30%;
        }
    .grid-12 {
        width: 73.55%
        }
    .grid-13 {
        width: 79.80%;
        }
    .grid-14 {
        width: 86.05%;
        }
    .grid-15 {
        width: 92.30%
        }
    .grid-16 {
        width: 100%;
        }

    /* Clearfix
    =================== */
    .grid-container:after,
    .group:after {
        content: " ";
        display: table;
        clear: both;
        }
    }

@media (min-width: 1200px) { .grid-container { max-width: 1100 } }

site .css snippets

html, body, .grid-containers { height: 100%; }

.left-panel { background-color: black; margin-right: -5px; border: outset 2px gray; height: 100% } .right-panel { vertical-align: top; }

Html

<div class="grid-container"> <div class="grid-2 left-panel"> </div>

<div class="grid-14 right-panel">
 </div>

</div>

content removed for DNR reasons.