Display:table expands the height of the div. Solutions?

Question

I have this html sequence that displays 2 bars. Because inside the first div I display an inline list, I want to use display:table because it looks nicer in this way. The problem is that it extends the div, making it bigger with 20px (and moves the other div lower).

<div class="top-bar></div>
<div class="tail-bar></div>

.top-bar{       
    width: 520px;
    height: 50px;
    dispaly: table;
    background-color: #FFFFFF;  
}

EDIT: I added a JSFiddle http://jsfiddle.net/eCYUT/2/

It is the version without display:table tag

Answer 1

The gap between the ul element and the div element was actually the margin related to the ul element.

To remove it, give margin-bottom: 0px to the class name of the ul element.

ul.stats{
    margin-bottom: 0px;
    /* other css properties */
}