Replace Table columns with DIV and CSS, using floats?

Question

I ma having an issue with divs and css and especially floats.. I need to convert a page that is heavy using tables and columns and rows, my idea is to create a div for each column but of course i need to float these.

What are the rules for floating? I should float left each Div until i come to the end and then i must "clear" the float?

Is it good practice to use Width / Height on a div others i can't float them correctly?? or is it better to use min-height ?

Of course my idea is removing all the css stuff to a css external style sheet so i presume i need to give each div and ID so that i can assign a float / style to it... or of course if they are all the same i can assign a css class?

Any help really appreciated

Thank you

Answer 1

<div id="mytable">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearer"></div>
</div>

<style>
   .left,.right {
      float:left;
      width:100px;
   }
   .clearer {
     clear:both;
     height:0;
   }
</style>

This is the way i style my "tables", it works in all browsers.