title: How to make floating divs and equal height
body: <p>First of all, this is my code for the web page</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("reset.css");
  @import url('https://fonts.googleapis.com/css?family=Raleway');
  *
  {
    box-sizing:border-box;
  }
  
  body
  {
    background-color: #9E9E9E; 
  }
  
  #wrapper
  {
    width:95%;
    max-width:980px;
    margin: 0 auto;
    font-family: 'Raleway', sans-serif;  
    line-height: 2rem;
  }
  
  
  .header
  {
    padding:18px;  
    background-color: #757575;    
  
    border-radius:5px;
    width:100%;  
    margin-top:5px;    
    margin-bottom:5px;    
  }
  
  .column_left
  {
    float:left; 
    padding:18px;
    width:70%   ;
    background-color:#607D8B;
    border-top-left-radius: 5px;
    border-bottom-left-radius:5px;  
  }
  
  .column_right
  {
    float:right;
    padding:18px;    
    width:29.99%; 
    background-color:#455A64;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  
  
  }
  
  /*For Screens 750 PX or less (width)*/
  @media screen and (max-width:750px)
  {
    .header
    {
      text-align:center;    
    }
  
    .column_right
    {
      display:none;    
    }
  
    .column_left
    {
      width:100%;        
      border-radius:5px;
    }
  }
  
  h1
  {
    font-size:1.8rem;
  }
  
  h2
  {
    font-size: 1.4rem;  
  
  }
  
  p
  {
  
  }
  
  nav
  {}
  nav ul
  {}
  nav ul li
  {
    width:100%;
    background-color:#607D8B;
    text-align:center;
    padding:2.5px;
    border-radius:5px;
    margin-bottom:5px;
  }
  nav ul li a
  {
    color:#455A64;    
  }
  
  
  footer
  {
    padding:18px;  
    background-color: #757575;    
    border-radius:5px;
    width:100%;  
    margin-top:5px;    
    margin-bottom:5px;  
    float:none;
    display:flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
  
  &lt;div id="wrapper"&gt;
    &lt;h1 class="header"&gt;Lorem Ipsum&lt;/h1&gt;
    &lt;div class="column_left"&gt;
      &lt;h2&gt;Welcome to Lorem Ipsum&lt;/h2&gt;
      &lt;p&gt;Aenean nec vestibulum justo, ut aliquet ante. &lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
      &lt;p&gt;Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.&lt;/p&gt;
      &lt;p&gt;Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.&lt;/p&gt;
      &lt;p&gt;Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column_right"&gt;
      &lt;h2&gt;Navigation&lt;/h2&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="button" href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="button" href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="button" href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      &amp;copy; 2016 Ipsum Lorem
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically I would like to have the <code>column_left</code> and <code>column_right</code> classes the same height, without using <code>height=100%</code>. The website will have more than one page, and the length on the others may not be the same as the example page. Here is an image of what I got so far:</p>
  
  <p><a href="https://i.stack.imgur.com/RofKt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RofKt.png" alt="enter image description here"></a></p>
  
  <p>Basically, I want the navigation div to be as tall as the one beside it.</p>