Problema con 2 divs alternando visibility

Buenas, estoy haciendo un chat y tengo esto:

<div style="visibility:visible;" align="right" id="onlineusersbutton"><input onClick="javascript:cambiar1();" type="submit" value="Chat rooms"></div>
<div style="visibility:visible;" align="right" id="onlineusers">
</div>


<div style="visibility:hidden;" align="right" id="chatrroomsbutton"><input onClick="javascript:cambiar2();" type="submit" value="Online Users"></div>
<div style="visibility:hidden;" align="right" id="chatrrooms">
</div>

<script type="text/javascript">
function cambiar1() {
document.getElementById('onlineusersbutton').style.visibility = 'hidden';
document.getElementById('onlineusers').style.visibility = 'hidden';
document.getElementById('chatrrooms').style.visibility = 'visible';
document.getElementById('chatrroomsbutton').style.visibility = 'visible';
}
function cambiar2() {
document.getElementById('chatrrooms').style.visibility = 'hidden';
document.getElementById('chatrroomsbutton').style.visibility = 'hidden';
document.getElementById('onlineusers').style.visibility = 'visible';
document.getElementById('onlineusersbutton').style.visibility = 'visible';
}
</script>


Pero tengo un problema, y es que cuando se cambia de un div a otro, aparece mas abajo, osea, con el contenido del otro encima pero invisible, lo que quiero es que al cambiar de lista de usuarios y lista de salas esten los dos en el mismo lugar.
Gracias :D