ajustar divs al contenido

diegoturriaga · #1 (**permalink**) 07/09/2010, 23:17

Se que el título de para mucho así que mejor les grafico lo que necesito hacer

El tema es el siguiente, el segundo div tiene ancho fijo (digamos 300px) pero la propiedades height es variable (depende del contenido) y con left pasa algo parecido.

El tercer div aparece dentro/sobre el div2, centrado verticalmente y horizontalmente, pero desplazado a derecha del div2 (vieron que era más fácil mostrarlo que escribirlo

Y, el div3 también tiene ancho fijo (digamos 130px;) pero el height también debiera ajustarse al contenido.

Bueno, eso es lo que no tengo ni idea de como comenzar, así que cualquier ayuda se agradece...

Shaito · #2 (**permalink**) 08/09/2010, 09:16

Hola!

La estructura se puede crear sin dificultad.. el problema es el tema del Div3, pues está sobre el Div 2 y saliendose de él.

El Div 3 tiene que estár dentro del Div2, y si el Div3 crece de ancho (130px) y a la distancia a la que está se agranda el width del Div 2.

Es decir, se puede poner como tienes en la imagen, pero no te aseguro que el texto corte y baje al llegar al Div3, se quedaría hasta llegar al final del Div2 y bajaría, y el Div3 taparía esa sección.

diegoturriaga · #3 (**permalink**) 08/09/2010, 20:36

Dejo lo que tengo hasta ahora (muy poco) pero quizás sirba de punto de partida...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prueba</title>
<style type="text/css">
#contenedor {
background-color: #009900;
width: 300px;
}
#contenido {
background-color: #FF9900;
margin-left: 235px; /* 300-(130/2) */
margin-top: -50%;
width: 130px;
}
</style>
</head>
<body>
<div id="contenedor">
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
<div id="contenido">Este el el texto informativo que complementa a la nota principal</div>
</div>
</body>
</html>

Así como está en IE8 el DIV3 no sale del DIV2... En Firefox y Chome si pero el fondo del DIV2 deja de pintarse donde termina el DIV3.

Bueno... sigo escuchando sugerencias y gracias por todo!

alexk · #4 (**permalink**) 08/09/2010, 22:27

Se me ocurre esta manera nose si te sirve.... prueba

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prueba</title>
<style type="text/css">
#contenedor {
background-color: #009900;
width: 300px;
}
#contenido {
background-color:#FF9900;
float:right;
margin:0 -65px 20px 20px;
width:130px;
}
</style>
</head>
<body>
<div id="contenedor">
    <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.</p>
    <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.</p> 
    <div id="contenido">Este el el texto informativo que complementa a la nota principal</div>
    <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.
    <p>Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré este texto una y otra vez.</p>
</div>
</body>
</html>

PD: a #contenido sin margin-top (para posicionarlo) ya que el texto superior dejaria un margen hacia la derecha y no se "amoldaria" este segun dicho objeto sobresaliente

PD: la mejor opcion seria position absolute... pero estaria encima del texto... enfin nose en realidad que pretendes chau....

diegoturriaga · #5 (**permalink**) 09/09/2010, 10:06

Muy bueno! Ajustando un poco la tuerca yo había llegado a esto:

<?php

$txtNota = "Este es el texto de la nota principal... la verdad que no tengo ni idea que más escribir, "
. "así que simplemente repetiré este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota "
. "principal... la verdad que no tengo ni idea que más escribir, así que simplemente repetiré "
. "este texto una y otra vez. Este es el texto de la nota principal... la verdad que no tengo ni "
. "idea que más escribir, así que simplemente repetiré este texto una y otra vez. Este es el "
. "texto de la nota principal... la verdad que no tengo ni idea que más escribir, así que "
. "simplemente repetiré este texto una y otra vez.";

$txtInfo = "Este el el texto informativo que complementa a la nota principal";

$pos = (int)((strlen($txtNota)-(strlen($txtInfo)*130/170))/2);
$txtA = substr($txtNota,0,$pos);
$txtB = substr($txtNota,$pos);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prueba</title>
<style type="text/css">
#contenedor {
background-color: #009900;
width: 300px;
}
#contenido {
background-color: #FF9900;
width: 130px;
float: right;
display: inline;
}
</style>
</head>
<body>
<div id="contenedor">
<?php echo $txtA; ?><span id="contenido"><?php echo $txtInfo; ?></span><?php echo $txtB; ?>
</div>
</body>
</html>

Nota: Lo único malo es que para centrar el div interior lo hice en base a la cantidad de caracteres. Y por otro lado, aparte de controlar donde inserto al div contenido al preparar la página, renuncié a la idea de que salga del contenedor.

diegoturriaga · #6 (**permalink**) 09/09/2010, 15:53

Bueno... lo de la alineación horizontal del tercer div ya está resuelto!

Ahora me resta ver como hacer para que el div3 quede centrado verticalmente con respoecto del div2...

De momento desde php puedo contar la cantidad de caracteres y meterlo en medio (mi mensaje anterior)... pero siempre y cuando no quiera usar texto con formato.

O bien puedo seguir la idea de alexk, contar la cantidad de párrafos e insertarlo en medio... pero solo quedará centrado si los párrafos de arriba ocupan el mismo alto que los de abajo (cosa muy improbable).

En conclusión, que ninguna de las alternativas centra realmente verticalmente al div :( ¿ideas?