Setting up a color bar in css - css

Question

I am new to css and trying to draw in 3 separate parts of a single box. The box is defined like this in CSS:
#nutrients .row .values li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
I want to be able to do this:
<li><span class="min_graph" style="background:green" height="32%">
<span class="normal_graph" style="background:red" height="22%">
</li>
where the min part would be the bottom third, the normal part would be the middle third, and the max part would be the top third.
I tried this in the CSS:
#nutrients .row .values li span .min_graph {
vertical-align:bottom;
}
#nutrients .row .values li span .normal_graph {
}
#nutrients .row .values li span .max_graph {
vertical-align:top;
}
but clearly I'm not understanding how to focus on the 3 different sections of the box.
Thanks...
========
Thanks so much for all the help! I didn't explain this well enough.
I do want to use div. There are basically 3 sub boxes, the lower (min), the middle (normal), and the top (max).
I want "#nutrients .row .values li" to be the parent element.
Then, the min graph piece would be the bottom 21px; the normal graph would be the middle 21px; and the max graph piece would be the top 21px.
Then, within the bottom 21px (for example), I might want to fill 30% of it, or 50% of it, etc.
Cell 1:
min graph piece - red, 21% of its full height of the bottom third
normal graph piece - white, and no text (the middle third)
max graph piece - white, and no text (the top third)
Cell 2:
min graph piece - green, 100% of its full height (the bottom third)
normal graph piece - green, and 46% of its full height (the middle third)
max graph piece - white
Cell 3:
min graph piece - green, 100% of its full height (the bottom third)
normal graph piece - green, and 100% of its full height (the middle third)
max graph piece - green, and 46% of its full height
In other words, the percentages cannot go into the CSS definition file. The HTML has to be able to set the percentages.
But the CSS does need to allow me to write to the individual three pieces of the parent box.
I need to understand how to make "#nutrients .row .values li" into a parent div.

Answer 1

Ideally, you would want to use <div> elements to accomplish this, as <span> elements are not serving their intended purposes here. I'll go over accomplishing this both ways.
<div> Implementation:
CSS:
/* To use %-based heights, the parent element must have a defined height */
.values { height: 500px; width: 100%;}
.min_graph { background:green; height: 32%;}
.normal_graph { background:red; height: 22%;}
.max_graph { background:yellow; height: 22%;}
HTML:
<div class='values'>
<div class="min_graph">TEST</div>
<div class="normal_graph">TEST</div>
<div class="max_graph" >TEST</div>
</div>
Example
<span> Implementation
Firstly - you will need to ensure that you are closing your <span> elements and you will need to use display: block to ensure that they are visible, as shown:
CSS
#nutrients .row. values li span
{
height: auto;
width: 100%;
display: block;
}
HTML:
<li>
<span class="min_graph" style="background:green; height:32%">Test</span>
<span class="normal_graph" style="background:red; height:22%">Test</span>
<span class="max_graph" style="background:yellow; height:22%">Test</span>
</li>
Example

Answer 2

Check out This JSFiddle with your example. Divs inside your <li> is the way to go, as a div is a block level element that works better for your needs. You define a parent element, in this case, the <li> with the width and height that you want the whole thing to be. Then it is just a matter of defining how big and what color you want each <div> to be.
<ul id="boxes">
<li>
<div id="top">Div 1</div>
<div id="mid">Div 2</div>
<div id="bottom">Div 3</div>
</li>
</ul>​
#boxes li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
#top {height:auto}
#mid {background:red; height: 32%}
#bottom {background:green; height:22%;}

Answer 3

You could use a css gradient to color the different sections:
I used this site: http://www.colorzilla.com/gradient-editor/
to produce this:
background: -moz-linear-gradient(top, #ff3232 0%, #ff3030 33%, #f9f227 33%, #f5f900 66%, #00ff00 66%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3232), color-stop(33%,#ff3030), color-stop(33%,#f9f227), color-stop(66%,#f5f900), color-stop(66%,#00ff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
Oh, but unless it's been changed, I don't think the iPad version of Safari accepts percentage gradients, only pixel count, so you may have to tweak that depending on your target user

Answer 4

I think you might be able to achieve what you are looking for more easily with a color sequence or gradient (as mentioned by Robot Woods). I found a good reference to be https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops
body {
background: linear-gradient(to right,
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}