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.

[alexk]

no uses posiciones absolutas a las cajitas usa float:left/right como veas conveniente... y al contenedor principal quitale la altura fija y cambia el overflow a hidden... los paddings estan enormes para posicionar recordemos que el padding es el margen interior de los elementos... para separaciones externas tenemos margin...
lee un poco acerca del "modelo de cajas" y "limpiar floats"
http://librosweb.es/
un saludo

[djsos]

muchas gracias aplique lo que me dijiste y funciono.

Dejo el codigo css corregido y funcionando.

Código CSS:

html>body #contenido {
    background-image:url(../img/body/index_r3_c1.jpg);
    width:1024px;
    margin:0 auto 0 auto;
    background-repeat:repeat-y;
    overflow:hidden;
}
 
html>body #box11{
    margin:30px;
    float:left;
    width:600px;
}
html>body #box12{
    margin:30px;
    float:right;
    width:300px;
}
html>body #box21{
    margin:30px;
    float:left;
    width:600px;
}
html>body #box22{
    margin:30px;
    float:right;
    width:300px;
}