[Solucionado] Problema con div y alineación

[Sancho.Mazorka]

Hola, qué tal?

Estoy haciendo una web en javascript, y estoy maquetando con divs. Como hay información que tal véz el usuario no desea ver, incluí una función que oculte el div al clickearlo, y que lo muestre de vuelta al clickear otra vez la barra. El problema está en que cuando vuelvo a mostrar el div, la información de adentro pierde la alineacion y se va todo para la izquierda.

Código (html4strict) [Seleccionar] Expandir

<div id="game_div" class="yellowline" onclick="muestra_oculta(this.id);"> <!-- BARRA CON TITULO QUE OCULTA EL CONTENEDOR -->
   <div style="display: table; margin-left: auto; margin-right: auto;">
       <div id="game_div_icon" class="left"><img id="game_div_icon_img" src="file:///C|/red_less.png" width="16" height="16" align="bottom" /></div>
       <div id="game_div_text" class="right">&nbsp;Call of Duty: Modern Warfare 2 Multiplayer</div>
   </div>
</div>
           
<div id="game_div_container"> <!-- DIV CONTENEDOR -->
   <div id="mapPreview">
       <div id="preview_div">
           <img src="img/nomap-en.png" alt="desconocido" name="mapname" width="240" height="135" longdesc="mapa desconocido" />
       </div>
       <div id="mapinfo_div"></div>
   </div>
   
   <div id="info_bar"></div>
       
   <div id="jugadores"><h2>Datos aca!</h2></div>
   <div id="status2" align="center" style="padding-top:5px"></div>
</div>

Código (javascript) [Seleccionar] Expandir

function muestra_oculta(id){
   if (document.getElementById){
       var el = document.getElementById(id + "_container"); //se define la variable "el" igual a nuestro div
       if (el.style.display == 'none'){
   el.style.display = 'table';
       }
       else{
           el.style.display = 'none';
}
   }
}

Código (css) [Seleccionar] Expandir

#preview_div{
text-align:center;
position:relative;
overflow:hidden;
margin-top:5px;
margin-bottom:2px;
}

#mapinfo_div{
color:#660000;
text-align:center;
font:Tahoma;
font-weight:bold;
font-size:12px;
}

#info_bar{
text-align:center;
font:Tahoma;
font-weight:bold;
font-size:12px;
}

#mapPreview{
height:160px;
}

Los DIVs que están vacios, se llenan automaticamente con información mediante AJAX. Acá no tiene relevancia eso, por ese motivo, omití el codigo.

Ahí está todo lo relacionado: HTML + JS + CSS.

Espero puedan ayudarme, muchas gracias desde ya.


Saludos, Sancho.Mazorka!    

[Sancho.Mazorka]

2 días peleando con ésto, abro un thread para ver si alguién me puede ayudar...y encuentro la solución yo solo.

Código (html4strict) [Seleccionar] Expandir

<div id="game_div_container" style="width: 100%"> <!-- DIV CONTENEDOR -->

Solo había que forzar el ancho del div.


Saludos, Sancho.Mazorka