<aside>
  Блок высотой 300px. Является сайдбаром на странице
</aside>
<main class="pad-30 color-w">
  Основной контент сайта. Основная проблема в том, что он может быть по высоте меньше, чем наш сайдбар, тогда футер также залезет справа от сайдбара
</main>

<div class="clear"></div>

<footer class="pad-30 color-w">
  Футер сайта
</footer>
body {
  font: 18px/1.5 sans-serif;
}

.pad-30 {
  padding: 30px;
}

.color-w {
  color: white;
}

.clear {
  clear: both;
}

aside {
  height: 300px;
  width: 30%;
  padding: 20px 10px;
  box-sizing: border-box;
  
  background: #3F51B5;
  color: #fff;
  
  float: left;
}

main {
  background: #2196F3;
  width: 70%;
  height: 300px;
  box-sizing: border-box;
  
  float: left;
}

footer {
  background: #9C27B0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.