This is a draft from two years ago, I just thought I would publish it in case it is useful for anyone. I don’t remember anything about it, not even what it was for. Feel free to use it in any way you like.
It looks like this:
#histogramcontainer { height: 20%; width: 10%; background-color:#deebf7; position:relative; /* To make the children's percentages relative */ /* setting position="absolute" bottom="0" on the histodivs makes them all overlay each other horizontally */ /* http://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div */ -moz-transform:rotate(180deg);-webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); } div.histogrambar { float:left; width:19%; background-color:#3182bd; } div#histogrambar_a {height: 20%; margin-left: 1%;} div#histogrambar_b {height: 10%; margin-left: 1%;} div#histogrambar_c {height: 40%; margin-left: 1%;} div#histogrambar_d {height: 100%; margin-left: 1%;} div#histogrambar_e {height: 30%;} |
<div id="histogramcontainer"> <div class="histogrambar" id="histogrambar_e"></div> <div class="histogrambar" id="histogrambar_d"></div> <div class="histogrambar" id="histogrambar_c"></div> <div class="histogrambar" id="histogrambar_b"></div> <div class="histogrambar" id="histogrambar_a"></div> </div> |