for starters, you cant have an <i>, as a direct child of a <ul>
also, if it's really a heading it should be <Hx>
if it's not I recommend you use <em> instead of <i>
so your markup order should be : <div><hx><ul><li>...
about the css
display:table; etc doesnt work in IE<8, so if supporting IE 7 and 6 is not an issue... then you can go ahead.
What you have figured out on your own is that you need to clear floated items. Setting the container to display:table does this. But as mentioned before it is not supported by IE<8. It also set the display to table, etc... which might produce later issues in all browsers if you intend to use relative or absolute positioning.
you know if you wanted this like :<i>This is the post excerpt for the post....</i> (again I would recommend using EM instead of I if you mean emphasis or SPAN if you dont) you could style that element with clear:both;
BETTER YET, you could use give the LI's a clear:both or overflow:hidden; instead of display:table.
I hope that sets you on the right path