Duda contenido dinámico

Hola, como están?

Quisiera hacer una pregunta, el tema es así, estoy iniciándome en el desarrollo en HTML junto con CSS, actualmente estoy encaminando una pagina la cual tengo como proyecto final.

Llevo entendiendo mas o menos, como estructurar la web de a secciones

Codigo.

Código:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="estilos.css">
<html>
<header>
  <title>Prueba</title>
</header>
    
<body>

<div id="top">
    <img class="logo_net"src="logo_net.png"/> <div class="logo_netd"></div> 
</div>

<nav id="menu">
<ul>
    <li><a title="Ir a la pagina principal" href="principal.html">Inicio</a></li>
    <li><a title="Aquí encontrarás información referida a la web" href="principal.html">Acerca de</a></li>
    <li><a title="sección de asistencia" href="principal.html">Asistencia</a></li>
    <li><a title="Descarga de controladores" href="principal.html">Descargas</a>
        </li>
    <li><a title="ChangeLog" href="#">Log</a></li>
</ul>
</nav>
<div id="principal">
    
<div id="contenido">
</div>
    
<div id="banner_d">
</div>

</div>
    

</body>
</html>

CSS

Código:

body{
 background-color: #FF8000;   
}


#top{
height: 140;
width: 995;
background-color: yellow;
}

.logo_net{
float:left;
}

.logo_netd{
height: 140; /*altura*/
width: 250px; /*anchura*/
background-color: red;
border-radius:10px;
float: right;
}


nav{ /*para centrarlo en el medio*/
    /*Bordes redondeados*/
    -webkit-border-radius:10px;/*Para chrome y Safari*/
    -moz-border-radius:10px;/*Para Firefox*/
    border-radius:10px;/*El estandar por defecto*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
    /*Degradados*/
    background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
    overflow:hidden; /* overflow para ajustar el contenido a la capa*/
    padding:5px; /*anchura del relleno*/
    width:985;
}

nav ul{
    list-style:none;
    margin:0 10px 0 10px;
    padding:0;
}


nav ul li{
    /*Bordes redondeados*/
    -webkit-border-radius:5px;/*Chrome y Safari*/
    border-radius:5px;/*Estandar por defecto*/
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin-right:10px;
    text-align:center;
    /*Sombras para texto, los mismos parametros que box-shadow*/
    text-shadow: 0px 1px 0px #FFF;
}
nav ul li:hover{
    /*Degradado de fondo*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
    background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
    /*Sombras*/
    -webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
    -moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
    -o-box-shadow:  1px -1px 0px #999;/*Opera*/
    box-shadow:  1px -1px 0px #999;/*Estandar por defecto*/
    border:1px solid #E3E3E3;
}
nav ul li a:hover {
    color:#000;
}
nav ul li a{
    color:#999;
    display:block;
    padding:6px;
    text-decoration:none;
    /*Transiciones*/
    -webkit-transition: 0.4s linear all;
    -moz-transition: 0.4s linear all;
    -o-transition: 0.4s linear all;
    transition: 0.4s linear all;
}
div#principal{
height: 600px;
width: 995px;
background-color: green;

}
div#contenido{
height: 600px;
width: 860px;
background-color: red;
border-radius:10px;
overflow: hidden;
}

div#banner_d{
height:120px;
width: 120px;
background-color: blue;
position: relative;
right: 0;
}

Mi cuestion es, quiero ubicar la caja azul, digamos, a la derecha..porque quiero que esta sea como una sección de banner, despues, la otra, es que en la caja de contenido quiero que tenga un contenido dinamico, es decir, que el usuario pueda mediante "anterior" y "siguiente" cambiar de contenido, esto para no tener que vooolver a cargar toda la web de nuevo

Como debería?

Saludos!