Foro de elhacker.net

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.

<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>

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';
	}
    }
}

#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.

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

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

Solo había que forzar el ancho del div.