<html>
<head>
<script type="text/javascript">
function show(id)
{
var misDivs = document.getElementById("der").getElementsByTagNam e("DIV");
for(i=0; i < misDivs.length; i++)
{
if( id == misDivs[i].id ) { misDivs[i].style.zIndex = 1; } //muestra objetivo
else {misDivs[i].style.zIndex = 0; } //oculta demas
}
}
</script>
<style>
body { background: #222; text-align:center; }
#contenedor
{
text-align: left;
width: 500px;
background-color: #fff;
margin: auto;
padding: 10px;
}
#cab
{
height: 100px;
width: 100%;
background-color: #789;
}
#izq2 { width: 20%; background: green; float: left; }
#izq { width: 20%; background: #069; float: left; }
#der { width: 80%; background: #456; float: left; }
.div_der { position: absolute; margin: 0; padding: 10px; z-index:0; }
#noti { background: #ccc; color: black; }
#home { background: #eee; color: 654; }
#rank { background: #ddd; color: 432; }
#pie { width: 100%; height: 20px; background: #333; color: white; clear: both; }
</style>
</head>
<body>
<div id="contenedor">
<div id="cab">Cab</div>
<div id="izq">
<a href="#" onclick="show('home');">Home 2</a><br>
<a href="#" onclick="show('noti');">Noti 2</a><br>
<a href="#" onclick="show('rank');">Rank 2</a><br>
</div>
<div id="der">
<div id=home class=div_der>home lalalala</div>
<div id=noti class=div_der>noticias lalalala</div>
<div id=rank class=div_der>ranking lalalala</div>
</div>
<div id="pie">pie</div>
</div>
</body>
</html>