I am attempting to render a series of divs into two columns. However, when viewing the example in this [JSFiddle](http://jsfiddle.net/nb32P/2/) link, I noticed there is extra spacing above Group Heading 4 in the left column that I cannot seem to remove. Is there a way to eliminate this additional space? Unfortunately, it must be compatible with IE8 :-( Thank you!
HTML
<div class="INeedToColumn">
<div class="groupheader">Group Heading 1</div>
...
</div>
</div>
...
</div>
</div>CSS
.INeedToColumn {
float:left;
display:inline;
width:45%;
margin-right:30px;
padding-bottom:8px;
vertical-align:top;
border-bottom:1px #B0BDC8 solid;
}
.INeedToLink > div {
float:left;
display:inline;
width:48%;
}
.INeedTo_ViewAll {
width:100%;
float:right;
text-align:right;
}