Aligning center image along with text of variable width with float

Div's have a default property of "display:block;", which gives them a width of 100% by default.
Sometime this can be a problem, consider a scenario where you want to show a image and message as 'Loading' as shown in the image below:

Or the message can be a bit long, say 'Failed to load, please try again later'. To reuse the CSS style for same purpose a better or handy solution here could be to use Tables.

Tables by default takes the width of the content inside it unless specified explicitly and it can be aligned center in all browsers.

So the code could look something like this:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto;">
<tr><td>
<div class="imgClass FloatLeft">
<div class="msgClass FloatLeft">
</td></tr>
</table>

One can apply required css to the table cell as per one's need.

Table will work as wrapper here. It will hold the content inside together and will align it to the center of the parent wrapper.