I have a vertical bar chart with 5 different colored sub-containers. I'm trying to position the 'chicken' sub-container at the bottom of the bar without any bottom-margin, but so far my attempts have been unsuccessful. When I try using absolute positioning for the 'chicken' sub-container, it doesn't display at all. (Please note: the height of each sub-container is being determined by Javascript, which has been tested and seems to be working fine. So, I suspect the issue lies within the HTML/CSS code itself).
HTML:
<div class="days">
<div class="days-container">
<div class="dairy"></div>
<div class="beef"></div>
<div class="pork"></div>
<div class="eggs"></div>
<div class="chicken"></div>
</div>
</div>
CSS:
.days {
float: left;
height:330px;
width: 1em;
}
.days-container {
position:relative;
height: 330px;
}
.chicken {
position: absolute;
bottom:0;
background-color: #00AAFF;
}