[bes]

Squirr,

Например, пока не понятно представленный на рисунке вид должен оставаться таким в рамках экрана или может прокручиваться, меню имеет постоянную высоту или зависит от содержимого, то же самое про баннер и т.д., также непонятно как это всё должно вести себя при масштабировании.

не на все вопросы ответили (а вариантов развития много)

Как вариант

<style>
  div {
    padding: 0px;
    margin: 1%;
  }
  .menu {
   float: left;
    width: 30%;
    background: lightgrey;
  }  
  #banner {
    padding: 10px;
    float: left;
    width: 63%;
    background: green;
  }  
  #banner div {
    background: lightgrey;
  }
  .bottom {
    clear: both;
    background: gray;
  }
  
</style>

<div class="content">

  <div class="menu">
<a href="#" 
  onclick="
    banner.children[i].style.display = 'none';
    banner.children[j].style.display = 'block';
    k = i; i = j; j = k;
    return false;
">
menu</a>
</div>

  <div id="banner">
    <div>
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
   </div>
    <div style="display: none">content2<br>content2</div>
  </div>

</div>

<div class="bottom">
bottom
</div>

<script>
  var i = 0;
  var j = 1;
  var k;
</script>