Question

I really need help converting this simple table structure to css div’s. Is there a simple application or something. CSS divs are driving me insane.

<table width="100%" border="0">
  <tr>
<td colspan="3" id="Header"></td>
 </tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
 </tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>

Answer 1

Test this:

EDIT: http://jsfiddle.net/DCbgg/

<style type="text/css" media="screen">
    .container {
        width: 100%;
    }
    .left20 {
        width: 20%;
        float: left;
        background: red;
    }
    .left40 {
        width: 40%;
        float: left;
        background: green;
    }
    .clear {
        clear: both;
    }
</style>

<div class="container">
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
<div class="clear"></div>
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
</div>
<div class="clear"></div>