div.whole{display:table;border-collapse:collapse}
div.parts{display:table-row-group;}
div.heading{display:table-row;background-color:grey;text-align:center}
div.columns{display:table;border-collapse:collapse}
div.main{display:table-row;border-collapse:collapse;}
div.left{display:table-cell;width:180px;background-color:pink}
div.content{display:table-cell;background-color:yellow}
div.right{display:table-cell;width:180px;background-color:orange}
div.footer{display:table-row;background-color:grey;text-align:center}

<div class="whole">
 <div class="parts">
  <div class="heading">Heading</div>
  <div class="main">
   <div class="columns">
    <div class="left"><ul><li>Item 1</li>...</ul></div>
    <div class="content">
      <p>The content of the page</p>
      <p>After breakfast ...</p>
      <p>The end of the content ..</p>
     </div>
     <div class="right"><ul><li>Menu 1</li>...</ul></div>
    </div>
   </div>
   <div class="footer">Footer</div>
 </div>
</div>