hidden div changes height of underlying table

[theoni]

hello all

I am trying to make a database query that draws data from a database and displays a div. I am using the z-index to make the div float at a specific point. the matter is that the div that displays the data makes the div that is below to increase the height the link to the website is this: http://www.schoox.com/user/knowledge/advancedsearch.php and the style for the div is this:

.suggestionsBox {
        position: relative;
        width: 300px;
        background-color: #ffffff;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000;    
        color: #ff5a00;
        margin: 0px 0px 0px 0px;
        text-align:left;
        overflow-y:scroll;
    }
 
    .suggestionList {
        margin: 0px 10px 10px 10px;
        padding: 0px;
        word-spacing: 0px;
        text-align:left;
    }
 
    .suggestionList li {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        cursor: pointer;
        list-style-type: none; 
        font-size:11px;
        font-weight:bold;
        text-align:left;
 
    }
 
    .suggestionList li:hover {
        color: #2377bf;
 
    }

thank you for any help