Foros del Web » Creando para Internet » CSS »

Insertar un div dentro de otro div con overflow=auto

Estas en el tema de Insertar un div dentro de otro div con overflow=auto en el foro de CSS en Foros del Web. La pregunta es sencilla, ¿cómo puedo hacer para posicionar un div flotante dentro de otro div flotante con overflow=auto... Por que mi problema es que ...
  #1 (permalink)  
Antiguo 28/12/2008, 13:16
Avatar de Yamilskate  
Fecha de Ingreso: septiembre-2006
Mensajes: 94
Antigüedad: 11 años, 2 meses
Puntos: 0
Pregunta Insertar un div dentro de otro div con overflow=auto

La pregunta es sencilla, ¿cómo puedo hacer para posicionar un div flotante dentro de otro div flotante con overflow=auto...

Por que mi problema es que cuando muevo el scrollbar de mi div padre, el div hijo se sale de este.

Aquí un ejemplo:

Código PHP:
<div style="position:relative; overflow:auto; widht:500px heigth:300px">
   <
div style="position:absolute;">
   </
div>
</
div



Espero me puedan ayudar, salu2!

pd: no encontre una sección de html para poner este tema así q lo puse en PHP :S

Última edición por Yamilskate; 28/12/2008 a las 13:24
  #2 (permalink)  
Antiguo 28/12/2008, 13:24
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Respuesta: Insertar un div dentro de otro div con overflow=auto

Hay una seccion dedicada al CSS. Y una para (X)HTML. Buscalas bien. Ctrl+F.
  #3 (permalink)  
Antiguo 28/12/2008, 13:51
Avatar de Yamilskate  
Fecha de Ingreso: septiembre-2006
Mensajes: 94
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Insertar un div dentro de otro div con overflow=auto

mmm, gracias amigo pero NO resolviste mi duda =(

espero q alguien me pueda ayudar con este problema, pues ya intente de todo y no logro resolverlo...
  #4 (permalink)  
Antiguo 28/12/2008, 19:31
Avatar de jam1138
/** @package Moderador */
 
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 13 años, 4 meses
Puntos: 101
Respuesta: Insertar un div dentro de otro div con overflow=auto

Cita:
Iniciado por Yamilskate Ver Mensaje
mmm, gracias amigo pero NO resolviste mi duda =(
Y tú NO estás preguntando en el lugar correcto . Tema movido desde PHP.

Suerte
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
  #5 (permalink)  
Antiguo 28/12/2008, 19:37
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Insertar un div dentro de otro div con overflow=auto

Me da la sensacion de que lo que quieres es que el calendario se quede, para eso ponle position: relative y desplazas a donde quieras...

Mañana te lo concreto si no te ha quedado claro...

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #6 (permalink)  
Antiguo 28/12/2008, 19:55
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Insertar un div dentro de otro div con overflow=auto

Aquí tienes una solución. Ajusta las medidas y características a tu diseño.

Funciona en ie6+, firefox y opera... y valida.

Código HTML:
<!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=windows-1252" />
<title>Mantener fijo un cuadro dentro de otro</title>
<style type="text/css">
#envolvente {
	position: relative;
	top: 0px;
	left: 0px;
	width: 500px;
	height: 300px;
	overflow: hidden;
	border: 1px solid #808080;
}	
#primero {
	position: relative;
	width: 500px;
	height: 300px;
	overflow: auto;
}
#calendario {
	position: absolute;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border: 1px solid #808080;
	background-color: #008080;
	margin-left: -50px;
	margin-top: -50px;
	left: 50%;
	top: 50%;
	z-index:10;
}
</style>
</head>

<body>
<div id="envolvente">
	<div id="calendario"></div>
	<div id="primero">
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- texto ---------- 
	</div>
</div>
</body>

</html> 
Saludos y feliz 2009 a todos!
  #7 (permalink)  
Antiguo 28/12/2008, 20:41
Avatar de Yamilskate  
Fecha de Ingreso: septiembre-2006
Mensajes: 94
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Insertar un div dentro de otro div con overflow=auto

Muchas gracias amigo!!!

Resolviste mi duda y así también ayudas a muchos otros!!!

Salu2!!!
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:56.