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

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

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