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!