Divs alineados en cuadricula

[djsos]

Hola buenas noches

Haber os cuento tengo varios divs. La colocacio es la sigiente:

Código HTML:

<div id="cabecera"></div>
<div id="cuerpo">
     <div id="caja11">
          <div id="cabeza_caja"></div>
          <div id="cuerpo_caja"></div>
     </div>
     <div id="caja12">
          <div id="cabeza_caja"></div>
          <div id="cuerpo_caja"></div>
     </div>
     <div id="caja21">
          <div id="cabeza_caja"></div>
          <div id="cuerpo_caja"></div>
     </div>
     <div id="caja22">
          <div id="cabeza_caja"></div>
          <div id="cuerpo_caja"></div>
     </div>
</div>
<div id="pie"></div>
 

Esta configurado con el siguiente codigo

Código CSS:

html>body #cabecera {
    background-image:url(../img/body/index_r1_c1.jpg);
    width:1024px;
    height:240px;
    margin:0 auto 0 auto;
    background-repeat:no-repeat;
}
 
html>body #cuerpo {
    background-image:url(../img/body/index_r3_c1.jpg);
    width:1024px;
    height:120px;
    margin:0 auto 0 auto;
    padding-top:20px;
    background-repeat:repeat-y;
    overflow:visible;
}
html>body #pie {
    background-image:url(../img/body/index_r4_c1.jpg);
    width:1024px;
    height:240px;
    margin:0 auto 0 auto;
    background-repeat:no-repeat;
}
html>body #caja11{
    width:600px;
    padding:20px;
    padding-left:40px;
    position:absolute;
    z-index:10;
}
html>body #caja12{
    position:absolute;
    width:300px;
    padding:20px;
    padding-left:680px;
    float:left;
}
html>body #caja21{
    position:absolute;
    width:600px;
    margin-top: 260px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 40px;
}
html>body #caja22{
    position:absolute;
    width:300px;
    margin-top: 260px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 680px;
}
 
html>body #cabeza_caja{
    background-image:url(../img/body/sup_texto.png);
    height:36px;
    background-repeat:repeat-x;
    color:#FFF;
    font-size:24px;
    color:#FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 50px;
    text-transform: uppercase;  
}
html>body #cuerpo_caja{
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    border-left-color: #CCC;
}
 

El problema es que con ajax modifico el texto de las cajas y cuando la caja se alarga se solapan con las de abajo y cuando se acortan me dan por saco porque queda un huecco enorme.

Alguna solucion intento poner y quitar codigo pero no consigo nada.

Me gustaria que las cajas se redimensionaran teniendo en cuenta el contenido de ellas.

Podeis ver lo que pasa aqui Aunque el nombre de los divs no es el mismo , ya que les cambie para que se viera mas claro el codigo css es el mismo.

Agradezco vuestra colaboracion.