How to make list elements behave like Table rows?

HTML & CSS
1

Given the markup below, I can make the image float to the left of the li container and the text aligns to the top with the following css:

#menuFooterRecent .attachment-post-thumbnail {float:left;}

However, this aligns the image left of ALL li elements. I want to make this behave as if it were in a table row so that adjacent sibling li elements act as if they are in a separate TR element and will fall below the floated image.

I’ve discovered that I can do this by adding display:table-row to the li elements like so:

#menuFooterRecent li {display:table-row;}

I’m just not sure about browser support for this property.

<div id="menuFooterRecent">
	<ul style="clear:left;margin:20px 0 0 0; padding:0; list-style-type:none;">
		<i>Related Articles Heading</i>	
		<li><img width="160" height="159" src="41iXqpFZbuL._SL160_.jpg" class="attachment-post-thumbnail wp-post-image" alt="41iXqpFZbuL._SL160_" title="41iXqpFZbuL._SL160_" /><a href="avett-brothers/">The Avett Brothers New Album Review</a>: <i>This is the post excerpt for the post....</i></li>
		<li><a href="my-test-post/">My Test Post</a></li>
		<li><a href="my-latest-post/">My Latest Post Test</a>: <i>This is the excerpt text for the post....</i></li>
		<li><a href="chinese-herbal-tea/">Chinese Herbal Tea</a>: <i>also known as medicinal herbal tea, Chinese Herbal tea is a kind of tea soup made from purely Chinese medicinal herbs in...</i></li>
		<li><a href="all-about-chai-tea/">All about Chai Tea</a>: <i>Chai, pronounced with a long "i" as in the word tie, is the actual word for tea in many countries....</i></li>
	</ul>
</div>
2

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