Foros del Web » Creando para Internet » CSS »

div Sidebar del mismo tamaño que div content

Estas en el tema de div Sidebar del mismo tamaño que div content en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/03/2007, 17:46
 
Fecha de Ingreso: marzo-2007
Mensajes: 6
Antigüedad: 17 años
Puntos: 0
div Sidebar del mismo tamaño que div content

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.

Última edición por SamueMX; 05/03/2007 a las 17:54
  #2 (permalink)  
Antiguo 06/03/2007, 17:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: div Sidebar del mismo tamaño que div content

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.
  #3 (permalink)  
Antiguo 06/03/2007, 17:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: div Sidebar del mismo tamaño que div content

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:15.