Foros del Web » Creando para Internet » CSS »

Posicionar un DIV dentro de Otro Div?

Estas en el tema de Posicionar un DIV dentro de Otro Div? en el foro de CSS en Foros del Web. Es eso posible? Porque no me ha funcionado ningún método convencional. Trataré de ser lo mas explicito posible: Tengo un div contenedor, centrado con su ...
  #1 (permalink)  
Antiguo 27/06/2008, 12:00
 
Fecha de Ingreso: marzo-2008
Mensajes: 73
Antigüedad: 16 años
Puntos: 0
Posicionar un DIV dentro de Otro Div?

Es eso posible? Porque no me ha funcionado ningún método convencional.
Trataré de ser lo mas explicito posible:

Tengo un div contenedor, centrado con su BG expandible (Llámese main). Dentro de ese div, tengo a otro, que margina el contenido (Llámese main_content), dentro de ese div, está un menú, a la izq (llámese main_menu), y finalmente, QUIERO poner un div llamado main_news AL LADO de main_menu, pero tengo resultados indeseados. Estos son los resultados:

Con position: absolute:
El bg expansible no funciona, porque main_news aparece FUERA de main_content

Con position: relative:
El BG expandible toma la forma del div, y lo sube. (Se expando el doble, en palabras simples)

Es obio que con fixed, y static, no funciona, sale por abajo.

Con float:
Se sale completamente del flujo del Documento. Sale como debería, pero fuera del div.

La única manera que he podido acercarme al resultado ha sido con márgenes negativos. ¿Hay una manera de posicionar DENTRO de ese div sin tanta vuelta?

Gracias.
(Aquí está el Código, si quieren evaluarlo.)

XHTML
Código HTML:
<body>

<div id="main_news_centered_header"></div>

	<div id="main_news_centered_container">
    
    	<div id="main_news_inside">

       	  <div id="main_menu"><script type="text/javascript" src="../scripts/level_II/menu.js"></script></div>
            <div id="main_news" class="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

      </div>
        
    </div>

<div id="main_news_centered_footer"></div>

</body> 
Y el CSS:
Código:
body
{
	background-image: url(../img/news/background.jpg);
	background-repeat: repeat-x;
}

div#main_news_centered_container
{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	background-image: url(../img/news/background.png);
	background-repeat: repeat-y;
}

div#main_news_centered_header
{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	height: 55px;
	background-image: url(../img/news/header.png);
	background-repeat: no-repeat;
}

div#main_news_centered_footer
{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	height: 55px;
	background-image: url(../img/news/footer.png);
	background-repeat: no-repeat;
}

div#main_news_inside
{
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}

div#main_menu
{
	width: 160px;
	height: auto;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 1px;
}

div#main_news
{
	width: 300px;
	height: auto;
}
EDIT:

Estuve probando también con Clear y Display.
Solo "inline-table" me dió resultado de todos los displays, pero es solo compilante con unos muy pocos Browsers (Los buenos, FF 3.0, Safari 3.1 y Opera 9.50), estoy buscando compatibilidad, y esa no es la solución. Si me pueden dar algún método con Display, lo sabría apreciar.

Última edición por AeroCross; 27/06/2008 a las 13:14 Razón: Más información
  #2 (permalink)  
Antiguo 28/06/2008, 13:43
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Respuesta: Posicionar un DIV dentro de Otro Div?

Creo que puedes solucionarlo con float, pon:
Código:
#main_menu, #main_news { float: left; }
Y luego lo que te fallaba se soluciona así:
Código HTML:
 <div id="main_news_inside">

       	  <div id="main_menu"><script type="text/javascript" src="../scripts/level_II/menu.js"></script></div>
            <div id="main_news" class="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="clear: both"></div>
      </div> 
Prueba a ver si funciona.
  #3 (permalink)  
Antiguo 01/07/2008, 19:21
 
Fecha de Ingreso: marzo-2008
Mensajes: 73
Antigüedad: 16 años
Puntos: 0
Respuesta: Posicionar un DIV dentro de Otro Div?

Nope, sigue habiendo el mismo problema con IE t_t
Como dije anteriormente, el Float no hace lo que quiero, se sale del flujo, y por ende no se expande el div que lo contiene.

Aquí, al parecer, float no es una opción.
  #4 (permalink)  
Antiguo 02/07/2008, 00:38
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
Respuesta: Posicionar un DIV dentro de Otro Div?

Mira a ver si lo puedes subir a algún sitio, porque sin ver el menú no imagino lo que quieres conseguir.

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 02:59.