[CSS]Senza il tag absolute il div sballa??

[System]

.container {
    font-family: "Comic Sans MS";
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #000000;
    background-color: #FFFFFF;
    word-spacing: normal;
    padding: 10px;
    height: 750px;
    width: 900px;
    list-style-type: disc;
    visibility: visible;
    z-index: auto;
    top: 150px;
    bottom: 898px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    background-image: url(sfondo.gif);
    border: thin groove #00CCFF;
}
.logo {
    font-family: "Comic Sans MS";
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    margin: 10px;
    list-style-type: disc;
    height: 2px;
    width: 900px;
    border: thin groove #0000FF;
}
.menu {
    font-family: "Comic Sans MS";
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    margin: 10px;
    padding: 10px;
    list-style-type: disc;
    height: 2px;
    width: 900px;
    }

.footer {
    font-family: "Comic Sans MS";
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    list-style-type: disc;
    height: 2px;
    width: 900px;
    margin-right: 10px;
    margin-left: 10px;
    position: fixed;
    left: 10px;
    padding: 10px;
    border: 1px groove #0000FF;
}
.content{
    font-family: "Comic Sans MS";
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    padding: 10px;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    list-style-type: disc;
    height: 600px;
    width: 900px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    float: inherit;
    position: fixed;
    }
.leftcolumn {
    height: 600px;
    width: 200px;
    font-family: "Trebuchet MS";
    font-size: 12px;
    color: #000000;
    float: left;
    border: 1px groove #0000FF;
    position: absolute;
    text-align: left;
    left: 44px;
    top: 252px;
}
.rightcolumn {
    height: 600px;
    width: 200px;
    font-family: "Trebuchet MS";
    font-size: 12px;
    color: #000000;
    float:right;
    position: fixed;
    border: 1px groove #0000FF;
    top: 252px;
}
.contenta {
    height: 576px;
    width: 409px;
    position: absolute;
    font-family: "Trebuchet MS";
    padding: 10px;
    border: 1px groove #0000FF;
    left: 257px;
    background-color: #FFFFFF;
    top: 255px;
} 

Non riesco a capire xkè nel div contenta se tolgo la proprietà position;absolute; il layout si sfasa completamente,ho creato un float a 2 colonne,quella di sinistra si appicica al body(contenta),quest'ultimo si rimpicciolisce e nn c'è verso di cambiargli la larghezza,mentre la colonna di destra scende giù allargandomi la pagina mostruosamente....

body>
<div class="container">
  <div class="logo">[img]logo.gif[/img]  </div>
  <div class="menu">
  
  <script language="JavaScript" type="text/javascript" src="./nuub_scr.js">
</script>


<table  cellpadding='0' cellspacing='0' border='0'><td>[img]./nuub_m1_b.png[/img]</td>
<td>[url="/index.php"][img]./nuub_m1_i0.png[/img][/url]</td>
<td>[img]./nuub_m1_s.png[/img]</td>
<td>[url="javascript:void(0);"][img]./nuub_m1_i1.png[/img][/url]</td>
<td>[img]nuub_m1_s.png[/img]</td>
<td>[url="javascript:void(0);"][img]./nuub_m1_i2.png[/img][/url]</td>
<td>[img]./nuub_m1_s.png[/img]</td>
<td>[url="javascript:void(0);"][img]./nuub_m1_i3.png[/img][/url]</td>
<td>[img]./nuub_m1_s.png[/img]</td>
<td>[url="javascript:void(0);"][img]./nuub_m1_i4.png[/img][/url]</td>
<td>[img]./nuub_m1_e.png[/img]</td>
</table> 
  </div>
  <div class="content">
  
    <div class="leftcolumn">
      <table width="200" height= "543" border="2" cellpadding="10" bordercolor="#0000FF" bgcolor="#0099FF">
        <tr>
          <th bordercolor="#0000FF" bgcolor="#0099FF" scope="row"><div align="left">
            

[img][/img]</p>
            

Primo paragrafo per qualche evento </p>
            

</p>
            

</p>
            

</p>
          </div></th>
        </tr>
        <tr>
          <th bordercolor="#0000FF" bgcolor="#0099FF" scope="row"><div align="left">
            

[img][/img]Qua ne aggiungi altri senza problemi </p>
            

</p>
            

</p>
            

</p>
          </div></th>
        </tr>
        <tr>
          <th bordercolor="#0000FF" bgcolor="#0099FF" scope="row"><div align="left">e qua boh,vedremo </div></th>
        </tr>
      </table>
      <p align= "left" ></p>
      
    </div>    
    <div class="contenta">
      

[img]logo1.png[/img]</p>
      

qui ci va il coso per le news </p>
      

Alltri inserimenti da fare sono</p>
      

qualche tool,data orario ed oggetti in php,per ora lascio la versione in html </p>
    </div>
    <div class="rightcolumn"> <table width="200" height="543" border="2" cellpadding="10">
        <tr>
          <th width="186" bordercolor="#0000FF" bgcolor="#0099FF" scope="row"><div align="left">
            

[img][/img]</p>
            

Stessa cosa qui;</p>
            

</p>
            

</p>
            

</p>
          </div></th>
        </tr>
        <tr>
          <th bordercolor="#0000FF" bgcolor="#0099FF" scope="row"><div align="left">
            

[img][/img]</p>
            

Idem</p>
            

</p>
            

</p>
          </div></th>
        </tr>
        <tr>
          <th bordercolor="#0000FF" bgcolor="#0099FF" scope="row"><div align="left">Idem</div></th>
        </tr>
      </table>
      <p align= "left" ></p></div>
  </div>
  <div class="footer">
   Lo spazio
      
  </div>
  </div>
</body>
</html> 

Se c'è qualcuno che mi può aiutare