CSS: in absolute list each li Element +x Pixel

Question

my goal is to create a Statistic Bar. To create this, i use a list which has position:absolute to have a vertical List. My problem is that - because of the absolut position- i have to give each li tag +50 Pixel, so that they are not overlapped.

Maybe someone has an idea or a better code snipped for this ;)

HTML

<div class="statisticWrapper">
  <div class="barWrapper">
   <ul>
    <li class="element1"  style="height:0%"></li>
    <li class="element2"  style="height:0%"></li>
    <li class="element3" style="height:100%;"><span>1056</span></li>
    <li class="element4" style="height:30%"></li>
   <li class="element5" style="height:0%"></li>
  </ul>
 </div>
</div>

and here is the CSS Code

.statisticWrapper{float:left; width:494px; height:250px; margin-left:8px;}
.statisticWrapper .barWrapper{float:left; width:494px; height:210px;  position:relative;}
.statisticWrapper .barWrapper ul > li {position: absolute; width: 40px; bottom:0px; background-color:#ccc;}

statisticWrapper .barWrapper li.element2{margin-left:50px;}
statisticWrapper .barWrapper li.element3{margin-left:100px;}
statisticWrapper .barWrapper li.element4{margin-left:150px;}
statisticWrapper .barWrapper li.element5{margin-left:200px;}

The code actually works, but when i want to have a responsive site, i have to change the margins in each media query and so.. There have to be a better method to solve my problem :(

This is what i actually have: http://skruffes.bplaced.net/test.html

This is what i want:

Answer 1

Another way would be to use vertical-align and display:inline-block or even inline-table to go a bit further.

gradient and box-shadow can help too to improve styling . example : DEMO

style attribute can be set from class and removed from HTML.

.statisticWrapper {
  float:left;
  border:solid;
  margin-bottom:25px;
}
.barWrapper {
  width:494px; 
  height:250px;
  line-height:275px;
  text-align:justify;/* spread evenly */
  background:lightgray repeating-linear-gradient(to bottom, transparent 0 , transparent 24px, gray 24px, gray 25px);
}
ul {
  margin:0;
  padding:0 50px 0 0;/* add padding on right, left has got an empty pseudo element using that much space */
  list-style-type:none;
  height:100%;
  line-height:1em;
  box-shadow:0 15px  15px gray
}
ul:before {/* handy once you have nothing up to 100% :) */
  content:'';
  padding-top:275px;
  display:inline-block;
  vertical-align:bottom;
}

ul:after {/* triggers justify like in flex model by adding a virtual line */
  content:'';
  display:inline-block;
  width:100%;
  height:0px;
  padding-right:50px;
}
li {
  width:40px;
  display:inline-table;
  vertical-align:bottom;
  background:lightgreen;
  padding-bottom:25px;
  position:relative;
box-shadow:0 0 1px 1px;
}
li span {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  background:green;
}
.h10 {height:10%;}
.h20 {height:20%;}
.h30 {height:30%;}
.h35 {height:35%;}
.h40 {height:40%;}
.h50 {height:50%;}
.h60 {height:60%;}
.h70 {height:70%;}
.h80 {height:80%;}
.h90 {height:90%;}
.h100 {height:100%;}

/* extra , demo purpose to center X,Y body*/
html {
  display:flex;
  min-height:100%;
}
body {
  margin:auto;
}

---

free interpretation of your chart possible through CSS and static position:

Answer 2

The easiest way would be to float li elements to left and move position: relative; from .barWrapper to li element. Then position span with bar label absolutely from bottom. Then you can forget about any additional classes or anything for individual bar.

Demo on JSFiddle

Note: I've removed unnecessary code and added <em>s to position bar label on the bottom to make it look better.

EDIT: If you want label to be over the bar as in your picture simply change bottom: 0; to bottom: 100% in em styling - JSFiddle

UPDATE: Or you can do that even better by setting display: inline-block; to li so then you can set height directly on li not on inner span as in my first solution so you don't need additional element. em is used only to get labels over the bar.

Demo on JSFiddle