español para obtener ayuda sobre desarrollo web.
Tengo un pequeño problema que ya me ha llevado unos días resolverlo y aun no lo logro. En un
inicio mi problema fue hacer que un DIV fuera ajustable a su contenido, y leyendo el
tutorial basico de ajax de este mismo sitio:
http://www.cristalab.com/tutoriales/162/tutorial-de-ajax
efectivamente pude lograr abrir una pagina dentro de un div y esté se ajustaba al tamaño de
la pagina que contenía, basicamente lo que estaba buscando, sin embargo, al estar
implementando mi pagina me topé con un problema. Y es que yo cargo una pagina en un div
llamado "container" y esté está a su vez dentro de otro div llamado "principal", el problema
es que "container" si se ajusta al contenido, pero "principal" no se expande junto con
"container", esto unicamente en Firefox, porque en IExplorer funciona bien. Debajo pongo el
codigo que estoy utilizando para que se entienda mejor:
La estructura de mi HTML es la siguiente:
<!-- .... -->
<body>
<div id="main"><!--este DIV solo sirve para poner una imagen de fondo con efecto de sombra
-->
<div id="header"> <!-- cabecera -->
</div>
<div id="principal"><!-- cuerpo -->
<div id="menu">
<a href="javascript:llamarasincrono('mipagina.html',
container');">Computadoras</a>
</div>
<div id="container"><!--en este div se carga la pagina del link de menu-->
</div>
<div id="bottom"><!-- pie de la pagina-->
</div>
</div>
</body>
y mi codigo css es el siguiente
body{ margin:0px; background-color:#8C9495;}
#main{ width:940px; min-height:1000px; margin-left:auto; margin-right:auto;
background:url(images/background.jpg) repeat-y;}
#header{ width:100%; height:210px; background:url(images/header.jpg);}
#principal{ width:900px; min-height:790px; margin-left:auto; margin-right:auto;
background-color:#FFFFFF;}
#menu{float:left; width:150px; height:600px; margin:0px;}
#container{ width:750px; min-height:790px; float:right; background-color:#FFFFFF;}
#bottom{ width:940px; height:205px; margin-left:auto; margin-right:auto;
background:url(images/bottom.jpg) no-repeat;}
como ya dije, el codigo anterior funciona bien en IExplorer, pero en Firefox el DIV
"container" se expande y pasa sobre el DIV "bottom", por lo que se enciman y se ve un efecto
bastante feo.
Ademas he probado añadir al codigo anterior las siguientes lineas
html{ height:auto; }
body{ height:auto; }
o tambien
html{ min-height:1000px; }
body{ min-height:1000px; }
pero el resultado es el mismo. Espero puedan darme una ayuda para saber que es lo que estoy
haciendo mal. De antemano agradezco la ayuda brindada.