html - <div> height percentages not working -

i've got bunch of nested divs (i know, not ideal use, it's temporary solution). i'm trying make child divs different heights percentage, it's not working; divs expanded minimum height needed fit text.

<div class="funnel" style="width:100%; height:600px">     <div class="container-header">       <p class="header"> funnel times </p>     </div>   <div class="outer" style="width: 100%; height:600px">     <div class="innercontainer" style="width: 50%; height:600px; float: left">       <center>         <div class="signups-indie inner" style="width: 80%; height: 10%; background-color: #bfccd5">           <p class="funneltimestext"> sign-ups: 8 hours / 2.1% </p>         </div>         <div class="installs-indie inner" style="width: 80%; height: 10%; background-color: #9eb2be">           <p class="funneltimestext"> installs: 2 days / 12.9% </p>         </div>         <div class="action1-indie inner" style="width: 80%; height: 10%; background-color: #4a5a66">           <p class="funneltimestext"> action 1: 2.5 days / 16.1% </p>         </div>         <div class="action2-indie inner" style="width: 80%; height: 10%; background-color: #333f47">           <p class="funneltimestext"> action 2: 5.2 days / 17.4% </p>         </div>         <div class="conversions-indie inner" style="width: 80%; height: 10%; background-color: #af212f">           <p class="funneltimestext"> conversions: 8 days / 51.5% </p>         </div>        </center>     </div>       <div class="innercontainer" style="width: 50%; height:600px; float: left">       <center>           <div class="signups-team inner" style="width: 80%; height: 1.8%; background-color: #bfccd5">           <p class="funneltimestext"> sign-ups: 10 hours / 1.8% </p>         </div>         <div class="installs-team inner" style="width: 80%; height: 10.9%; background-color: #9eb2be">           <p class="funneltimestext"> installs: 2.5 days / 10.9% </p>         </div>         <div class="action1-team inner" style="width: 80%; height: 8.7%; background-color: #4a5a66">           <p class="funneltimestext"> action 1: 2 days / 8.7% </p>         </div>         <div class="action2-team inner" style="width: 80%; height: 13.1%; background-color: #333f47">           <p class="funneltimestext"> action 2: 5.2 days / 17.4% </p>         </div>         <div class="conversions-team inner" style="width: 80%; height: 65%; background-color: #af212f">           <p class="funneltimestext"> conversions: 8 days / 51.5% </p>         </div>       </center>     </div>   </div> </div> 

here's fiddle well, can see it's not working: http://jsfiddle.net/3w08gdmf/

out of curiosity, why using strictly html , not css style markup? if way, whenever adjust have manually change in html. secondly, percentage percent of parent <div> means if have <div id="a"> , <div id="b">, nested in <div id="a"> <div id="b"> % of <div id="a">.

in short:

html

<div id="a">    <div id="b"></div> <!-- see how b nested within --> </div> 

css

#a { height: 100px; // set height }  #b {  height: 80%;   // 80% of parent div "a" = 80px because 80% of 100 80  } 

hope clears things up.

edited html clarification , punctuation editing.