css - How do I make Chrome and Firefox treat tables around floats the same? -

i looking @ method move right-floated image down , have content wrap around top, side, , bottom.

then since wanted vertically-centered bullet point content, decided use single-row tables. (i couldn't find way without using tables...)

that's when realized chrome , firefox don't wrap tables around floated elements same. in fact, chrome right , firefox doesn't.

is there way make them consistent either way?

see http://jsfiddle.net/xpd9j/49/ , change width of result see mean.

<div id="leftfloater"></div> <div id="rightfloater"></div> <table>     <tr>         <td class="centerbullet">             <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/actions-arrow-left-icon.png" />         </td>         <td>             watch behavior when changing result width. fox != chrome!         </td>     </tr> </table> 

(using chrome 29.0.1547.66 m , ff 23.0.1)

wow, that's weird. seem adding table{clear:left;} make firefox behave more chrome in specific case.