I have a table embedded in a div, with an image floated to the left of it. I use padding-left to add some space between the image and the table. It works as I want in most browsers, but in IE7, the table is touching the image. When I inspect the element, the padding is overlapping the table instead of going to the left of it.

I tried replicating this in a minimal fiddle, but my attempt ran into this misbehavior in all browsers, so I'm not sure what's different on the real page.

The real page is:

<http://dev.bridgebase.com/barmar_test/lessons/index-so.php?cat_id=3>

The spacing I'm concerned with is to the left of "Title:".

The attempted fiddle is:

<http://jsfiddle.net/barmar/HaCgF/4/> 

How can I get this spacing consistently in all browsers?