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"> Call of Duty: Modern Warfare 2 Multiplayer
</div>
<div id="game_div_container"> <!-- DIV CONTENEDOR --> <img src="img/nomap-en.png" alt="desconocido" name="mapname" width="240" height="135" longdesc="mapa desconocido" />
<div id="status2" align="center" style="padding-top:5px"></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.