css - how to replace a layout of html web page from a table to using divs -

i've had page layout made via html table in home page.

the lay out fine , though reading tables not way go (seo , maybe not that)

so need use divs, layout follows (i in rtl lang /style /direction)

my question is try , simplify how or give example lay out that

and in more detailed explained :

i think "my life" simple, when had understand structure of table so, illustration purpose take markup:

<table>      <tr> <td>1</td> <td>2</td> </tr>      <tr> <td>3</td> <td>4</td> </tr> </table> 

here don't need think analyze 2 2 table

but when comes divs no results laying them plan know how make simple table me .

2 trying achieve layout via divs (no table involved ) , make work layout cross browser, meaning same @ least 3 main browsers ie8&9 / ff / chrome (only preference)

thanks in advance

tried hard make template want.i hope it.see layout division tag.i attaching screen shot created on base of div logic.i think clear you.

<div id="main" >     <div style="background-color:blue; text-align:center; ">     main banner     </div>     <div style="background-color:green; text-align:center; " >     top menu     </div>     <div style="background-color:gray; text-align:center; width:300px; float:right; height:200px; " >     right side menu     </div>     <div style="background-color:red; text-align:center; height:200px;" >     <div style="background-color:fuchsia; text-align:center; width:300px; float:right; height:100px; ">     contend2     </div>     <div style="background-color:lime; text-align:center;height:100px;   ">      contend1     </div>     <div style="background-color:aqua; text-align:center; width:300px; float:right; height:100px; ">     contend4     </div>     <div style="background-color:orange; text-align:center;height:100px;   ">      contend3     </div>     </div>     <div style="background-color:silver; text-align:center;   " >     footer     </div>     </div>   **in case if want external css use**  <div id="main" >     <div id="mainbanner">     main banner     </div>     <div id="topmenu" >     top menu     </div>     <div id="rsm" >     right side menu     </div>     <div id="maincontend" >     <div id="c2" >     contend2     </div>     <div id="c1">      contend1     </div>     <div id="c4">     contend4     </div>     <div id="c3">      contend3     </div>     </div>     <div id="footer">     footer     </div>     </div> **css................**  #main    { }  #mainbanner {     background-color:blue;     text-align:center; }  #topmenu {     background-color:green;      text-align:center; } #rsm {     background-color:gray;      text-align:center;      width:300px;      float:right;      height:200px; } #maincontend {     background-color:red;      text-align:center;     height:200px; } #c2 {    background-color:fuchsia;     text-align:center;     width:300px;     float:right;     height:100px;   } #c1 {    background-color:lime;     text-align:center;    height:100px;  } #c4 {     background-color:aqua;      text-align:center;      width:300px;      float:right;      height:100px; } #c3 {     background-color:orange;      text-align:center;     height:100px; } #footer {     background-color:silver;      text-align:center; }