Web - страница с вертикально ориентированным блоком навигации

{
  box-sizing: border-box;
}

html,
body,
#carrier {
  margin: 0;
  padding: 0;
  height: 100%;
}

#carrier {
  display: table;
  min-height: 100%;
}

#header {
  margin: 0;
  background: #069;
  font-family: Arial;
  padding: 1ex;
}

#footer {
  margin: 0;
  background: #069;
  display: table-footer-group;
}

#menucarrier,
#text {
  display: inline-block;
}

#menucarrier {
  width: 22%;
  float: left;
  text-align: center;
}

#text {
  width: 78%;
  padding: 1ex;
}

#menu {
  background-color: ;
  /*box-shadow:inset 0 0 5em 1em #960;*/
  background: linear-gradient(90deg, rgb(100, 50, 0, 1), rgb(200, 100, 0, 0) 30%), linear-gradient(270deg, rgb(100, 50, 0, 1), rgb(200, 100, 0, 0) 30%), #fc0;
}

#menu p {
  margin: 0;
  padding: 1ex;
}

#menucarrier a {
  display: block;
  border: solid 1pt #860;
  width: 70%;
  margin: 0 auto;
  padding: 1ex 0;
  background: #fc0;
  color: #111;
  text-decoration: none;
  font: 400 14pt Arial;
}

<div id="carrier">
  <h1 id="header">Сайт о сайтах</h1>
  <div id="menucarrier">
    <div id="menu">
      <p><a href="concept/index.html">Концепции</a></p>
      <p><a href="tech/index.html">Технологии</a></p>
      <p><a href="nuances/index.html">Нюансы</a></p>
      <p><a href="about/index.html">О&nbsp;проекте</a></p>
      <p><a href="map/index.html">Карта сайта</a></p>
    </div>
  </div>
  <div id="text">
    <h2>Создавайте правильные сайты!</h2>
    <p>Мы призываем всех веб-разработчиков помнить, что создание сайтов&nbsp;&mdash; это нелегкий труд, требующий аккуратности и ответственности, глубокого знания многих принципов и <a href="concept/index.html">концепций</a>, уважительного отношения к
      <a
        href="tech/index.html">технологическим стандартам</a>, учета бесчисленного множества <a href="nuances/index.html">нюансов</a>. Этот проект ставит своей целью популяризацию грамотной веб-разработки в Рунете.</p>
    <h2>Последние обновления</h2>
    <p class="news"><span class="date">30.03.2005.</span> В разделе <a href="tech/index.html">&laquo;Технологии&raquo;</a> открыта страница, посвященная <a href="tech/css.html">каскадным листам стилей CSS</a>.</p>
    <p class="news"><span class="date">28.03.2005.</span> Открыт раздел <a href="nuances/index.html">&laquo;Нюансы&raquo;</a>, посвященный правилам хорошего тона, принятым в веб-разработке, грамотным подходам к использованию веб-технологий.</p>
    <p class="news"><span class="date">25.03.2005.</span> Сайт введен в эксплуатацию. Приглашаем практикующих веб-разработчиков, которым не все равно, как будет развиваться Рунет, к сотрудничеству.</p>
  </div>
  <div id="footer">
    <p>&copy;&nbsp;<a href="http://www.lomov.ru/">Артемий Ломов</a>, 2005.<br />Пишите письма: <a href="mailto:[email protected]">[email protected]</a>.</p>
  </div>
</div>