CODEWITHSUNDEEP
htmlcss
keegancodes
keegancodes

Reputation: 43

<div> height percentages not working

I've got a bunch of nested divs (I know, probably not ideal for this use, but it's just a temporary solution). I'm trying to make the child divs different heights by percentage, but it's not working; the divs are just expanded to the minimum height needed to fit the 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 a fiddle as well, where you can see it's not working: http://jsfiddle.net/3w08gdmf/

Upvotes: 0

Views: 452

Answers (2)

ARLCode
ARLCode

Reputation: 651

Out of curiosity, why are using strictly HTML and not CSS to style the markup? If you do it this way, whenever you adjust anything you will have to manually change EVERYTHING in HTML. Secondly, percentage is the percent of the parent <div> basically this means that if you have <div id="A"> and <div id="B">, which is nested in <div id="A"> then <div id="B"> will be a % of <div id="A">.

In short:

HTML

<div id="A">
   <div id="B"></div> <!-- See how B is nested WITHIN A -->
</div>

CSS

#A {
height: 100px; // Set Height
}

#B {

height: 80%; 

// This is 80% of the parent DIV "A" which is = to 80px because 80% of 100 is 80

}

Hope this clears things up.

Edited the HTML for clarification and some punctuation editing.

Upvotes: 0

tribe84
tribe84

Reputation: 5622

For you to use % height, each nested element must explicitly specify its height. It takes its height from its immediate parent. If the parent does not have a height specified (either absolute or relative), it will not work.

The center element in your code does not have a height specified.

http://jsfiddle.net/3w08gdmf/2/

.innercontainer center{
    height: 100%;
}

Upvotes: 1

Related Questions