div Sidebar del mismo tamaño que div content

SamueMX · #1 (**permalink**) 05/03/2007, 17:46

Hola!

Estoy realizando un diseño en mi blog, el típico de sidebar a la izquierda y contenido a la derecha. Estos dos div, dentro del div "padre" llamado contenedor. El problema es el siguiente: div content y div sidebar crecen respecto al contenido (como debe ser). El problema es que el contenido de "content" es generalmente mas grande que el de sidebar de manrera que sidebar queda mas pequeño y termina antes que content.

Lo que quiero lograr es que, independientemente del texto que tenga Sidebar, este div se adapte al tamaño que adopta el div content...

Graficamente:

*ttp://img261.imageshack.us/img261/9826/disenoji7.gif

¿Es posible?

Gracias!

Samuel.

Mikmoro · #2 (**permalink**) 06/03/2007, 17:00

Si, es posible. Se me ocurre una manera de hacerlo, basada en que "contenido" está dentro de "sidebar":

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>SamueMX</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#sidebar { margin-right: 10px;
background-color: rgb(51, 153, 153);
margin-left: 10px;
height: auto ! important;
height: 20px;
overflow: auto ! important;
overflow: none;
}
#sidebartext { float: left;
background-color: transparent;
margin-top: 20px;
margin-left: 10px;
}
#contenido { border-left: 12px solid rgb(255, 255, 255);
background-color: rgb(102, 204, 204);
padding: 20px 10px 10px;
float: right;
width: 700px;
}
  </style>
</head>
<body>
<div id="sidebar">
<div id="contenido">
<p>Este es el bloque de contenido</p>
<p>Este es el bloque de contenido</p>
<p>Este es el bloque de contenido</p>
</div>
<div id="sidebartext">Sidebar
</div>
</div>
</body>
</html>

Échale un vistazo y a ver si te sirve.

Mikel.

Mikmoro · #3 (**permalink**) 06/03/2007, 17:35

Otra manera de hacerlo:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>SamueMX2</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#contenedor { border-left: 260px solid rgb(51, 153, 153);
background-color: rgb(102, 204, 204);
overflow: auto;
}
#contenido { border-left: 12px solid rgb(255, 255, 255);
padding: 20px 10px 10px;
}
#sidebar { position: absolute;
top: 20px;
left: 20px;
}
  </style>
</head>
<body>
<div id="contenedor">
<div id="sidebar">Sidebar</div>
<div id="contenido">
<p>Este es el bloque de contenido</p>
<p>Este es el bloque de contenido</p>
</div>
</div>
</body>
</html>

Ten en cuenta que en ambos ejemplos el contenido debe ser mayor que el sidebar, que es lo que comentabas, porque si no habrá problemas.

Mikel.