Replace Table columns with DIV and CSS, using floats?

Question

Hi there,

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.

Answer 2

This might be helpful:

http://www.vordweb.co.uk/css/replacing-tables.htm

http://snook.ca/archives/html%5Fand%5Fcss/getting%5Fyour%5Fdi

Answer 3

I am 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.

Sounds fine. Beware, though, that converting table layout to CSS layout might be tricky if you want to keep the appearance 100% the same.

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?

Let me answer by example:

<div style="float: left;">Column 1</div>
<div style="float: left;">Column 2</div>
<div>Column 3</div>
<div style="clear: left;">Stuff below the three columns</div>

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 ?

That depends on whether you want the width/height to depend dynamically on the content or if you want it fixed. min-height can be useful in a lot of cases, but I think the question is too general to be answered.

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?

Yes.