CSS - při vytváření grafů se sloupce zobrazují obráceně

Ahoj,

snažím se udělat základní graf, kdy data generuji z PHP a pomocí CSS je vykresluji, konkrétně jen primitivně měním výšku div dle hodnoty. To vše funguje správně, avšak div třídy graphWide se "přichytává" k horní (top) hraně místo ke spodní (bottom) divu třídy graphContainerWide. Jak bych to měl vyřešit? Díky

HTML kód:

<div class="graphContainerWide">
<div class="graphWide">12</div>
<div class="graphWide">12</div>            
<div class="graphWide">12</div>            
<div class="graphWide">12</div>            
<div class="graphWide">12</div>
</div>

CSS styly:

.graphContainerWide {  width: 100%;}
.graphWide {  color: white;  width: 7px;  max-height: 200px;  float: left;  font-size: 10px;  bottom: 0;}

Vypadá to pak takhle - potřebuji zkrátka sloupce vertikálně otočit a přichytit ke spodní hraně divu:

ODPOVĚĎ

Ahoj,

zkus to takhle, u mě pak to zobrazení je v pořádku:

.graphContainerWide {
  width: 100%;
}

.graphWide {
  color: white;
  width: 7px;
  max-height: 200px;
  font-size: 9px;
  display: inline-block;
  position: relative;
  background-color: #aeaeae;
  vertical-align: text-bottom;
}