Why isn't overflow: hidden working?

Question

See http://www.collegeanswerz.com/colleges.

I just added this styling to the bottom of the page that says "Ranks according to US News." (before it wasn't styled):

.usnews {
    display: inline;
    position: relative;
    top: 75px;
    padding: 25px;
    background-color: rgba(128, 128, 128, 0.1);
}

This has led to a vertical scroll bar. I don't want the scroll bar. I googled around, and found overflow: hidden;. I tried it, and it didn't work. Then I read that for it to work, the element has to have a height. So I gave a height: 100%;, but the scroll bar is still there. How do I get rid of the scroll bar? Here's my code:

@import "bootstrap";

#colleges_css {
width: 900px;
h3 {
    font-size: 17px;
}

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

.usnews {
    display: inline;
    position: relative;
    top: 75px;
    padding: 25px;
    background-color: rgba(128, 128, 128, 0.1);
}

.name_column { width: 25px; }
.rank_column { width: 55px; }
.location_column { width: 60px; }
.setting_column { width: 90px; }
.size_column { width: 55px; }
.cost_column { width: 75px; }
.math_column { width: 70px; }

table#national_universities_table thead tr .tablesorter-header {
    background-image: url("sort_both.png");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

table#national_universities_table thead tr .tablesorter-headerAsc {
    background-image: url("sort_asc.png");
}

table#national_universities_table thead tr .tablesorter-headerDesc {
    background-image: url("sort_desc.png");
}

table#liberal_arts_colleges_table thead tr .tablesorter-header {
    background-image: url("sort_both.png");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

table#liberal_arts_colleges_table thead tr .tablesorter-headerAsc {
    background-image: url("sort_asc.png");
}

table#liberal_arts_colleges_table thead tr .tablesorter-headerDesc {
    background-image: url("sort_desc.png");
}

.letters {
    font-size: 8px;
    .nav-pills > .active > a {
        background-color: rgba(0, 136, 204, 0.80);
    }
}

.list {
    -moz-column-count: 4; /* Firefox */
    -webkit-column-count: 4; /* Safari and Chrome */
    column-count: 4;

    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Safari and Chrome */
    column-gap: 40px;
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    .top_li {
        margin-top: -12px;
    }
    a:hover {
        text-decoration: underline;
    }
    height: 100%;
    overflow: hidden;
}
.letter-list {
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    a:hover {
        text-decoration: underline;
    }
}

}

Answer 1

Option 1:

You can use overflow: visible on .tab-content.

Option 2:

Use overflow: hidden, but this will initially cut of your usnews paragraph. To fix that, remove position: relative and top: 75px and add margin-top: 75px and display: inline-block from #colleges_css .usnews