Interesting alignment issue in HTML Table element.

Few days back , i was having a strange problem. i have a table inside a div and i want the items in table to be centered aligned.

Now generally i have declared a class like this.

table.thumb{
 margin-bottom : 1px;
}
table.thumb td{
  text-align:center;
  vertical-align :top;
}

In general sense , this css will have the table leave 1px from bottom and colums will have items center align. Now, this wont work. because , the table is nested inside a div , with float set to "left", in that case even i set the text-align property , the float will override them.

div.submit_form {
 float:left;
 }

To make , this work ,  i need to modify the stylesheet class, like the following.

 table.thumb td{
  float:none;
  text-align:center;
  vertical-align :top;
}

This will remove the parent behaviour of "float" for the table. Thus, everything will work just fine. 

Thanks to, IE dev tool bar, which made my CSS debugging so much easier. :-)