La Capa se estira mas de lo que debe

[ArturoGallegos]

bueno exceptuando por el hecho que no puedo ver el contenido de

Código HTML:

<link href="/Estilos.css" rel="stylesheet" type="text/css" />
 

no veo grandes cosas en tu html pensé que ya tenias algo mas definido, aunque si no to algunas mejoras con respecto a tu css original...

1.- el usar divs para maquetar no implica que debas usar position absolute a cada rato y para cada elemento de hecho a la larga te complica la vida si no los manejas adecuadamente.

2.- define el ancho mínimo y máximo en pixeles con -> min-width y max-width

3.- cuando usas porcentajes estos toman su tamaño con respecto al elemento padre

4.- el float y clear que te mencione es lo que se usa para colocar un elemento tipo bloquee al lado de otro

por ejemplo

Código HTML:

<div style="width: 300px;background:#ccc;">
    <div style="width:100px;float:left;background:#fe0;"><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#f00;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#036;"><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#03f;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
</div>
 

si observas los elementos hijo están flotando a la izquierda y se coloca uno junta al otro y el div padre (color gris) no crece y el cuarto div hijo se coloca debajo del 3 div en lugar de colocarse en una nueva fila

para solventarlo coloco overflow:hidden al div padre para que creesca y clear:left al 4 div hijo para que tome posision en una nueva linea

Código HTML:

<div style="width: 300px;background:#ccc;overflow:hidden;">
    <div style="width:100px;float:left;background:#fe0;"><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#f00;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#036;"><p>hola mundo</p><p>hola mundo</p></div>
    <div style="width:100px;float:left;background:#03f;clear:left;"><p>hola mundo</p><p>hola mundo</p><p>hola mundo</p></div>
</div>
 

1.- use float left en lugar de position absolute que tu usas
2.- use clear left porque use float left si hubiese usado float right tendría que usar clear right o si uso ambos float left y right usaría clear both
3.- use los estilos en linea juto con el html solo para ilustrar un ejemplo no es recomendable usarlos asi siempre lo mejor es separar estilos en un archivo aparte

Nota: tu cuando usas position absolute el elemento padre no crece porque estas sacando del flujo los elementos hijo... para solventarlo no estoy muy seguro como hacerlo haber si alguien mas nos ilustra con una solución

Nota 2: min-width y max-width no funciona en IE6, solo lo comento como dato meramente informativo no porque debas dar soporte a este navegador