div alignment issue

firefox renders correctly; chrome leaves some gaps at the bottom

HTML

<table border=1>
    <tr>
        <td>        
            <div class="queryQuality">
                <div>Results preview</div>
                <div class="queryPreview">
                    <div class="previewContainer">
                        <div class="previewBar">
                            <div class="viewed" style="height: 10%;" title="Already seen"></div>
                            <div class="retrieved" style="height: 90%;" title="Already retrieved"></div>
                        </div>
                        <div class="previewBar">
                            <div class="retrieved" style="height: 100%;" title="Already retrieved"></div>
                        </div>
                        <div class="previewBar">
                            <div class="retrieved" style="height: 100%;" title="Already retrieved"></div>
                        </div>
                        <div class="previewBar">
                            <div class="padding" style="height: 60%;"></div>
                            <div class="retrieved" style="height: 40%;" title="Already retrieved"></div>
                        </div>
                    </div>
                </div>
            </div>
            <img style="border: none; width: 110px; height: 1px;" src="http://192.168.20.224:8080/images/bracing.gif" />
        </td>
    </tr>
</table>

CSS

.queryQuality {
    position: relative;
}

.queryPreview {
    height: 100%;
    z-index: 1;
    float: left;
    margin-right: 10px;
}

.previewContainer {
    background-color: inherit;
    border: 1px solid darkgray;
    height: 40px;
    width: 100px;
}

.previewBar {
    float: left;
    height: 100%;
    position: relative;
    width: 10px;
}

.previewBar > .viewed {
    background-color: #C0C0C0;
}

.previewBar > .retrieved {
    background-color: #808080;
}

.previewBar > .retrieved {
    background-color: #808080;
}