Puede un div contenido expandir a un div contenedor ¿?

pqnova · #1 (**permalink**) 18/07/2008, 01:39

Buenas otra vez!... como no a vueltas con los divs...

Me imagino que conforme me vaya maquetando mas y mas... me acabaré encontrando los problemas básicos que todos os habeis encontrado... pero yo es que no se como se comporta estos divs del diablo

Mi pregunta ahora es.

Teniendo un DIV contenedor a tamaño fijo (por ej. a 500px), podría un DIV en su interior expandir (por ej. con 800 px o apareciendo una imágen mas grande que 500px por poner un ej.) al contenedor ¿?

Tal que así.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>test</title>
<style type="text/css">

html, body {
	width: 100%;
	height: 100%;
}

#cuerpoprincipal {
clear: left;
background-color: #00ffff;
border-width: 1px;
border-style: solid;
width: 500px;
}


.barra {
clear: left;
background-color: #00ff00;
}


.divfastidia {
clear: left;
background-color: #ff0000;
width: 800px;

}

</style>
</head>
<body>
<div id="cuerpoprincipal">
<div class="barra">x</div> 
<div class="divfastidia">Este div se salta la maquetación se salta la maquetación se salta la maquetación se salta la maquetación</div> 
</div>
</body>
</html>

Ahora mismo el div "cuerpoprincipal " se ve sobrepasado por "divfastidia" que lo "sobrevuela" y no lo expande...

Esto es posible?

Como posible solución se me había ocurrido meterle un display: inline; a "cuerpoprincipal " para que se expanda si hiciera falta... pero creo que no pillo el concepto por que el resultado es no es el esperado...

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>test</title>
<style type="text/css">

html, body {
	width: 100%;
	height: 100%;
}

#cuerpoprincipal {
clear: left;
background-color: #00ffff;
border-width: 1px;
border-style: solid;
width: 500px;
display: inline;
}


.barra {
clear: left;
background-color: #00ff00;
}


.divfastidia {
clear: left;
background-color: #ff0000;
width: 800px;

}

</style>
</head>
<body>
<div id="cuerpoprincipal">
<div class="barra">x</div> 
<div class="divfastidia">Este div se salta la maquetación se salta la maquetación se salta la maquetación se salta la maquetación</div> 
</div>
</body>
</html>

Como podría hacer esto?.. o no se puede?

Muchas gracias!

Mikmoro · #2 (**permalink**) 18/07/2008, 02:23

Prueba esto:

#cuerpoprincipal {
clear: left;
background-color: #00ffff;
border-width: 1px;
border-style: solid;
min-width: 500px;
width: auto!important;
width: 500px;
}

Mikel.

pqnova · #3 (**permalink**) 18/07/2008, 02:39

Gracias Mikel!

Pues el caso... es que se me expande el "cuerpoprincipal" por toda el ancho... es decir, no crece de 500px que debería tener mas los 300px (que le sobran de los 800px del div contenido).. se expande hasta el maximo del navegador... tanto en IE como FF...

No llego a captar bien la "politica" a seguir con la expansión dinámica de los divs... ni el uso del max-width ni el min-width... no logro llegar a usarlos correctamente... es que no me hacen lo que se supone que deberían hacer... sabeis de algún enlace donde lo expliquen mas o menos bien

...

Gracias!

Mikmoro · #4 (**permalink**) 18/07/2008, 03:25

Ah, vaya, hablábamos de width y yo estaba pensando en height, incluso habiéndolo escrito. Es que este tipo de consultas siempre suelen ser sobre el height.

Lo puedes hacer cambiando de sitio el width y añadiendo float: left

Cita:

#cuerpoprincipal {
clear: left;
background-color: #00ffff;
border-width: 1px;
border-style: solid;
float: left;
}
.barra {
clear: left;
background-color: #00ff00;
width: 500px;
}

¿Es eso lo que buscas?

Miel.

pqnova · #5 (**permalink**) 18/07/2008, 03:40

Gracias otra vez ;)

En realidad no, mas bien esto:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>test</title>
<style type="text/css">

html, body {
	width: 100%;
	height: 100%;
}


#cuerpoprincipal {
background-color: #00ffff;
border-width: 1px;
border-style: solid;
float: left;
width: 500px;
}

.barra {
clear: left;
background-color: #00ff00;
}

.divfastidia {
clear: left;
background-color: #ff0000;
width: 800px;
}


</style>
</head>
<body>
<div id="cuerpoprincipal">
<div class="barra">barra de decoración</div> 
<div class="divfastidia">Este div se salta la maquetación se salta la maquetación se salta la maquetación se salta la maquetación</div> 
</div>
</body>
</html>

La "barra" (es solo diseño por llamarlo de alguna forma...) lo único que quiera es que se expanda dinámicamente con el contenedor, osea con "cuerpoprincipal", el problema viene con "divfastidia" que al tener un ancho superior a su contenedor "cuerpoprincipal" lo que hace es "sobrevolar" el contenedor "cuerpoprincipal" en vez de ensancharlo mas allá de sus 500px hasta los 800px que ocupa "divfastidia".

Espero no liar mas el asunto.. bastante me estas ayudando!

Mikmoro · #6 (**permalink**) 18/07/2008, 03:56

Pues no te creas que te entiendo bien con lo de la barra verde, pero bueno, puedes probar esto:

Cita:

#cuerpoprincipal {
clear: left;
background-color: #00ffff;
border-width: 1px;
border-style: solid;
float: left;
min-width: 500px;
width: auto!important;
width: 500px;
}

Mikel.

pqnova · #7 (**permalink**) 18/07/2008, 04:15

Joder Mikel!! la clavas campeón!!

llevas ya unos cuantos divs hechos eh?

Ahora me toca estudiar como lo has hecho

Muchas gracias por la ayuda!!!!

Mikmoro · #8 (**permalink**) 18/07/2008, 04:57

Si, unos pocos

De nada, es un placer.

Saludos.

Mikel.