How to make Divs to use 100% height between horizontal nav and footer

i have been searching for this and have tried every solution given on this page, but for some reason i haven't found why the given solutions doesn't work on my project.

i need the left_wrapper and right_wrapper to use 100% of height, and also need the footer to be always at bottom.

here is my code:

Code jsdfiddle.net

HTML

<!DOCTYPE html>
<div class="global_wrapper">
<header>
<img src="imagenes/imagen.png" alt="logo" class="logo">
</header>
<nav class="menuhorizontal"> <strong>

  <li><a href="#.php" class="item1">Inicio</a></li>
  <li><a href="#.php" class="item1">cosa2</a></li>
  <li><a href="#.php" class="item1">cosa3</a></li>
  <li><a href="# 51.php" class="item1">&Aacuterea 51</a></li>
   </strong>

</nav>
<div class="content_wrapper">
    <div class="left_column">pendejadas a la izquierda</div>
    <div class="right_wrapper">A Helena.
        <br>
        <br>de que se ven rüinas y pedazos.
        <br>Y la dura ocasión de tanto daño
        <br>mientras vencido Paris muere ardiendo
        <br>del griego vencedor duerme en los brazos.
        <br>Lope de Vega.
        <br>
    </div>
</div>
<footer>Aquí</footer>
</div>
</body>

</html>

CSS

html {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: sans-serif;
background-color: #ccc;
margin: 0;
font-size: 0.9em;
height: 100%;
}
.global_wrapper {
width: 90%;
background-color: transparent;
margin: 0 auto;
min-height: 100%;
position: relative;
}
header {
width: 100%;
height: 100px;
margin: 0 auto;
background-color:orange;
}
header img.logo {
float: left;
max-height: 50px;
max-width: 140px;
margin-top: 25px;
margin-left: 25px;
}
nav.menuhorizontal {
width:100%;
margin: 0 auto;
height: auto;
color: #e1e1e1;
border: 0;
background: #0061a7;
text-align: center;
vertical-align: middle;
line-height: 190%;
}
nav.menuhorizontal li {
list-style: none;
display: inline;
}
nav.menuhorizontal a.item1 {
text-decoration: none;
color: #e1e1e1;
padding-left: 7px;
padding-right: 7px;
border-color:silver;
}
nav.menuhorizontal a.item1:hover {
background: #e1e1e1;
color:#0061a7;
padding: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
-webkit-transition: background-color .30s ease-in-out;
-moz-transition: background-color .30s ease-in-out;
-o-transition: background-color .30s ease-in-out;
transition: background-color .30s ease-in-out;
}
.content_wrapper {
width: 100%;
margin: auto;
padding-bottom: 100px;
overflow: hidden;
}
.left_column {
display: block;
width: 25%;
float: left;
background-color:#de9e47;
padding: 1.7%;
box-sizing: border-box;
}
.right_wrapper {
display: block;
width:75%;
float: left;
background-color: #e1e1e1;
padding: 1.7%;
box-sizing: border-box;
height: 100%;
}
footer {
clear:both;
width: 100%;
height: 100px;
margin: 0 auto;
background-color:orange;
text-align: center;
bottom: 0;
left: 0;
padding: 2%;
box-sizing: border-box;
position: absolute;
}

Solution

you have to make come changes in css ...like left_column position:absolute and its parent position:relative. and right_wrapper float:right thats it, and you will get what you are trying to achieve..

html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: sans-serif;
    background-color: #ccc;
    margin: 0;
    font-size: 0.9em;
    height: 100%;
}
.global_wrapper {
    width: 90%;
    background-color: transparent;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
}
header {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color:orange;
}
header img.logo {
    float: left;
    max-height: 50px;
    max-width: 140px;
    margin-top: 25px;
    margin-left: 25px;
}
nav.menuhorizontal {
    width:100%;
    margin: 0 auto;
    height: auto;
    color: #e1e1e1;
    border: 0;
    background: #0061a7;
    text-align: center;
    vertical-align: middle;
    line-height: 190%;
}
nav.menuhorizontal li {
    list-style: none;
    display: inline;
}
nav.menuhorizontal a.item1 {
    text-decoration: none;
    color: #e1e1e1;
    padding-left: 7px;
    padding-right: 7px;
    border-color:silver;
}
nav.menuhorizontal a.item1:hover {
    background: #e1e1e1;
    color:#0061a7;
    padding: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    -webkit-transition: background-color .30s ease-in-out;
    -moz-transition: background-color .30s ease-in-out;
    -o-transition: background-color .30s ease-in-out;
    transition: background-color .30s ease-in-out;
}
.content_wrapper {
    width: 100%;
    margin: auto;
    padding-bottom: 100px;
    overflow: hidden;
    position:relative;
}
.left_column {
    display: block;
    width: 25%;
    float: left;
    background-color:#de9e47;
    padding: 1.7%;
    box-sizing: border-box;
    position:absolute;
    height:100%;
}
.right_wrapper {
    display: block;
    width:75%;
    float: right;
    background-color: #e1e1e1;
    padding: 1.7%;
    box-sizing: border-box;
    height: 100%;
}
footer {
    clear:both;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color:orange;
    text-align: center;
    bottom: 0;
    left: 0;
    padding: 2%;
    box-sizing: border-box;
    position: absolute;
}

<div class="global_wrapper">
    <header>
        <img src="imagenes/imagen.png" alt="logo" class="logo">
    </header>
    <nav class="menuhorizontal"> <strong>
       
      <li><a href="#.php" class="item1">Inicio</a></li>
      <li><a href="#.php" class="item1">cosa2</a></li>
      <li><a href="#.php" class="item1">cosa3</a></li>
      <li><a href="# 51.php" class="item1">&Aacuterea 51</a></li>
       </strong>

    </nav>
    <div class="content_wrapper">
        <div class="left_column">pendejadas a la izquierda</div>
        <div class="right_wrapper">A Helena.
            <br>
            <br>de que se ven rüinas y pedazos.
            <br>Y la dura ocasión de tanto daño
            <br>mientras vencido Paris muere ardiendo
            <br>del griego vencedor duerme en los brazos.
            <br>Lope de Vega.
            <br>
        </div>
    </div>
    <footer>Aquí</footer>
</div>