The purpose of this post is to help people who are facing the problem of moving from normal Table-based layouts in HTML to the newer Tableless (or DIV-based) layouts, I’ll try to provide the simplest guide and steps to understand the DIV concept…

1. Why do I need to change?

• There is a major performance issue with table-based layouts, the browser needs to calculate the table structure in memory first, then it does a second calcualtion  to actually render it on screen, all this the user is seeing nothing until the whole content suddenly appears (you can overcome this through CSS)
• Tables are harder to maintain or update once completed, as adding an extra column or row specially if you have lots of rowspans or colspans, sometime redesigning the whole table would be easier.

2. What do I need to understand?

• What is a DIV?

  A DIV is simply a layer with defined dimensions (either by % or pixels) that can be positioned in any part of the screen and on separate layers and can automatically float (move) around according to screen dimensions and content thus giving you 100% flexibility to implement your design

• The CSS Box-Model (margin – border – padding)

  

  Each DIV has a margin, border & padding as per the image above that can be controlled from the CSS, for further information check W3.org or HTML Source

• CSS Positioning (Relative – Absolute – Fixed)

  Basically what you need to know is when you create a DIV it is positioned according to its place in the HTML flow (which is called static position), if you need to move it relative to that default position you would use relative positioning, if you want it to move to a specified position regardless of it place in the HTML you would use Absolute positioning, you need to note that absolute positioning is always relative to its parent not to the whole screen, to keep it fixed on the screen regardless of scrolling you would use the fixed positioning .

  for further information check W3 Schools

• Floats

  Floats is exactly as its name implies, it floats an element either left or right of it’s parent container, you can either float to the right or to the left, you may also clear floats – that is sort of (start a new row) – a good example of floats is Google image search, in a small screen you may have 4 results per row, if you have larger screen width you would have 6 or 7 results per row, that is each image floats to fit in the screen width available.

  for further information check Smashing Magazine or CSS Tricks

That  is all the basics a developer would need to know to move from normal Table-Based layouts to CSS(DIV)-based layouts.

Hope this helps out a bit 🙂

[digg=http://digg.com/programming/Crash_guide_in_Tableless_developmenth_Using_CSS_and_DIVs]