Considering Converting Table’s to Div’s

[caseys_32]

I know there are many benifits to moving from tables to css and div's and after trying to convert one page I have several question that i'm hopeing someone can help with. If everything goes well I will have about 100 pages to convert.

Here is the code so far:

<div position="float: left">
<span class="contentHeader">Direct Basics</span><br>
<p><span class="h2"> Access Direct</span> </p>
<p><span class="livetext">To access Direct: </span></P>
<span class="livetext"> <ol>
<li>On the Portal home page, you can either:<br>
<p style="text-indent: 2em;"> Click the Tool Quicklink for <b>Assetwise
Direct</b> </p>
<p style="text-indent: 10em;"> or<br>
<p style="text-indent: 2em;"> Click the <b>EVALUATE LOANS</b>
menu to select <b>Assetwise Direct</b><br>
</li>
</ol> </span>

<p class="SmallText">
<span class="livetext">
<ol start="2">
<li>When the security screen appears, enter your...<br>
<p style="text-indent: 3em;"> user name
<p style="text-indent: 4em;"> and password<br>
<p style="text-indent: 5em;"> and click <b>OK</b><br>
<br>
Note: The user name and password fields are case sensitive.</li>
</ol></span>
</p>
</div>

<div style="position: absolute; left: 450px; top: 115px"><a target="_blank" href="images/access_awd.jpg">
<img border="0" src="images/access_awd_small.jpg" xthumbnail-orig-image="images/access_awd.jpg" width="100" height="60"></a> <br>
<div style="text-align=center;"> <span class=reporttext>
<a href="images/access_awd.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div>
</div>

<div style="position: absolute; left: 450px; top: 325px"> <a target="blank" href="images/password_box.jpg">
<img border="0" src="images/password_box_small.jpg" xthumbnail-orig-image="images/password_box.jpg" width="100" height="63"></a><br>
<div style="text-align=center"><span class=reporttext>
<a href="images/password_box.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div>
</div>
<p class=livetext style="position: absolute; float: left; left: 515px; top: 500px">
<a href="#" onClick="window.history.back(); return false;">Back</a>
</p>

THe actual page will have a menu on the left and top and this code will be in the main part of the screen. Now, my problem's with the code, other than I have the css in the file (will move to .css file later), are: i'm not sure if ive used the best way for positioning images or codeing style for that matter, and when text is resized in a browser it will overlap the images, is there a way around that?

Once i'm done with this page someone else (who is comfortable with tables and has limited web design experience) will be doing updates in FrontPage. For that would it be easier for them to just stick with tables?

Any help would be greatly appreciated.