Replace Table columns with DIV and CSS, using floats? - css

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.

Answer 2

This might be helpful:
http://www.vordweb.co.uk/css/replacing-tables.htm
http://snook.ca/archives/html_and_css/getting_your_di

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.