Hey guys,

My site is pretty much 100% div/css driven as i refuse to use tables at all costs, but i am having a problem with making spanable tables with div/css.

I have made 2 instances of these, 1 with 2 columns and 3 to 5 rows, and another with 3 columns and 5 rows.

with each one, in IE6 and Firefox, occasionally when i load the page instead of all lining up they go haywire and the offender always seems to be 1 row in which instead of having all the columns lined up there will be a gap and then the "table cell" will be another column across which shouldnt really exist.

Because of this the whole table gets thrown out of shape and looks quite ugly.

It is always a randow row and there is no real consistency to the problem, it happens approx 1 in 10 times and when it does there is no consistency to which cell in which row will skip a place and throw everything out.

here is my css for the 2 column issue, hopefully the fix for this one will fix the 3 column issue too.

Code:
.tablediv { display:table;width:100%}
.rowdiv{display:table-row; width:auto;}
.celltopic { float:left; display:table-cell; width:50%;	height:85px; overflow:hidden; background-color:#eeeeee;}

<div class='tablediv'>  
  <div class='rowdiv'>
    <div class='cellTopic'>
      <!-- content here -->
    </div>
    <div class='cellTopic'>
      <!-- content here -->
    </div>
  </div>
  <div class='rowdiv'>
    <div class='cellTopic'>  
      <!-- content here -->
    </div>
    <div class='cellTopic'>
      <!-- content here -->
    </div>
  </div>
</div>
If you want an example of the error try refreshing this page a few times and that will hopefully give you an example of the bug on the 3 column example.

I have tried so many things, i am sure it must be a basic error but i just cant figure it out :\