css - How to get two equal columns, one column containing 3 equal height div "rows"? -

i have 2 div columns, right column contains dynamic list content, left contains 3 divs act rows):

i've found many methods getting equal height 2 main columns, there way of getting 3 div "rows" 33.33% height each well?

the html code:

header <div id="wrapper">     <div id="left_container">         <div class="content">             #1 left asd         </div>         <div class="content">             #2 left asd         </div>         <div class="content">             #3 left asd         </div>     </div>     <div id="right_container">         <div class="content">             right asd         </div>     </div> </div> footer 

the css

div {     margin: 0;     padding: 0;     display: block;     border: 1px solid #ccc;     height: 10em; /* should px or em */     margin: -1px; /* size of border */     font-size: 20px; /* modulate height of div like: 20x10=200px */ } #wrapper {     width: 100%; } #wrapper:after {     clear: both;     display: block;     content: ' '; } #left_container, #right_container {     float: left;     width: 50%;     height: 100%; } #left_container .content {     height: 33.33%; } #right_container .content {  } 

live example: http://jsfiddle.net/z2hpu/2/