div autoampliable

gutiw · #1 (**permalink**) 27/10/2005, 14:24

Tengo un div "contenedor" con un div dentro llamado "contenido" , cuando lleno "contenido" se atoamplía hacia abajo para que quepa lo que pongo y desborda por abajo al "contenedor ¿cómo se hace para que esto no suceda y el "contenedor" se autoamplíe también?
He probado con {overflow: auto;} y con {heigth: 100%} y no funciona.

#contenedor {
position: absolute;
left: 175px;
top: 261px;
width: 574;
height: 100%;
}
#contenido {
position: absolute;
top: 25px;
left: 20px;
background-color: #FFCC33;
width: 534px;
}

<div id="contenedor">
<div id="contenido">
<p>blabla blabla blabla blabla blabla blabla</p>
</div>
</div>

He buscado por el foro pero no encuentro pistas, gracias por la ayuda.

RoQ · #2 (**permalink**) 27/10/2005, 15:01

es por el "position : absolute"

Cita:

Iniciado por http://www.ignside.net/man/css/posicionamiento.php

Los elementos "absolutamente" posicionados dentro de un documento HTML (y tambien los elementos "children" que engloba) no forman parte del fluir general del resto de elementos del documento. Su posición es asignada independientemente de la que ocupen el resto de los elementos del documento.

Por defecto, el contenido de una pagina (por ejemplo los bloques de texto de cada párrafo) se adapta automáticamente al tamaño de la ventana, alargando o acortando las líneas, etc, colocando un párrafo detrás de otro, segun se va leyendo el archivo, acomodándo entre si los distintos elementos que integran el documento. A esta adaptabilidad llamamos fluir (flow), o flujo html.

Pues bien, los elementos posicionados de forma absoluta no fluyen con los demás, colocándose de forma independiente, incluso superponiendose a otros elementos. Los elementos de este tipo, por ello, se consideran fuera del flujo HTML, en cuanto a que pueden colocarse en cualquier sitio del documento, independientemente de su situación en el código fuente

No hay necsidad muchas veces de posicionar un div de esa manera, podrias dejarlo asi:

Código:

#contenedor {
margin-left: 175px;
margin-top: 261px;
width: 574px;
}
#contenido {
margin-top: 25px;
margin-left: 20px;
background-color: #FFCC33;
width: 534px;
}

gutiw · #3 (**permalink**) 27/10/2005, 16:31

Gracias por tus consejos RoC, efectivamente es como tú dices, así funciona muy bien, lo que sucede es que ahora no me funciona el "margin-top" (sí funciona el "margin left") la capa contenido queda pegada al borde superior de la capa contenedor y no hay manera de bajarla, también tengo una capa "pie" abajo que tiene que quedar separada del borde inferior e igualmente se queda pegada.

.contenedor {
margin-left: 175px;
margin-top: 160px;
width: 574px;
z-index: 2;
}
.contenido {
position: relative;
margin-top: 40px;
margin-left: 20px;
width: 534px;
padding-top: 60px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
z-index: 3;
}
.pie {
bottom: 10px;
margin-left: 20px;
width: 534px;
z-index: 3;
height: 20px;
padding-left: 20px;
padding-right: 20px;
}

RoQ · #4 (**permalink**) 27/10/2005, 16:42

ponle un padding-top al contenedor y un margin-top al pie, quitale el bottom y el z-index

gutiw · #5 (**permalink**) 27/10/2005, 16:55

Con el padding-top se ha arreglado lo del margen superior, pero con lo otro no se arregla el pie, si te he entendido bien, es esto:

.pie {
margin-top: 10px;
margin-left: 20px;
width: 534px;
height: 20px;
padding-left: 20px;
padding-right: 20px;
}

pero a mí no me funciona
Muchas gracias y disculpa tantas preguntas, es mi "primera vez"

RoQ · #6 (**permalink**) 27/10/2005, 17:58

pon el html en todo caso

gutiw · #7 (**permalink**) 27/10/2005, 18:20

Ahí va, lo he editado para que sea mas corto

<div id="contenedor" class="contenedor">
<div id="contenido" class="contenido">
<div id="titulo" class="titulo">fffffffffffff</div>
<img src="imagen.jpg" alt="imagen1" width="200" height="301" class="imgizquierda">
<p> texto texto texto texto texto texto </p>
<img src="imagen.jpg" alt="imagen1" width="200" height="133" class="imgderecha">
<p>texto texto texto texto texto</p>
</div>
<div id="pie" class="pie"><p>texto texto texto texto</p></div>
</div>

.contenedor {
padding-top: 30px;
margin-left: 175px;
margin-top: 160px;
width: 574px;
background-color: Blue;
z-index: 10;
}
.contenido {
margin-left: 20px;
margin-right: 20px;
background-color: #FFCC33;
width: 534px;
padding: 30 20 40 20px;
z-index: 3;
.pie {
margin-top: 10px;
margin-left: 20px;
width: 534px;
background-color: #FFCC33;
height: 20px;
text-align: center;
padding: 10 20 10 20px;
}

RoQ · #8 (**permalink**) 27/10/2005, 18:46

mmmm creo que te falta cerrar una llave, pero cual es el problema del pie, yo lo veo asi

gutiw · #9 (**permalink**) 27/10/2005, 18:53

Yo tambien lo veo así, lo que quiero es levantarlo unos px para que no quede pegado al borde del contenedor

RoQ · #10 (**permalink**) 27/10/2005, 18:59

ahhhhhhh
entonces ponle un padding-bottom al contenedor
y ese <div id="titulo" class="titulo">fffffffffffff</div> debes reemplazarlo por un
<h1 id="titulo" class="titulo">fffffffffffff</h1>
y ¿ porque eso de repetir el id y class, si solo aplicas estilo a las clases?

gutiw · #11 (**permalink**) 27/10/2005, 19:06

Por fin. No hay nada como saber... los fallos que me comentas y que ahora mismo corrijo se deben a lo poquísimo que sé, pues estoy dando los primeros pasos, es mi primera web hecha de mala manera con tablas y que estoy intentando pasar a capas y Css, un auténtico lío... de verdad.
Muchas gracias

RoQ · #12 (**permalink**) 28/10/2005, 08:34

de repente esto te sirve:
http://html.conclase.net
http://www.ignside.net/man/css/
Diseñorama :Tutoriales:Diseña una página con código semántico
Diseñorama :Articulos:El Modelo de Cajas
y para mi algo que es super didactico y basico:
El tuto de los tes chanchitos webmasters:
Capitulo 1 , Capitulo 2, Capitulo 3