Bitte um Hilfe bei Positionierung von dynamischen divs

[PaveLow]

Hallo,

Ich habe ein Problem mit der Positionierung von divs in einer anderen div.

Unzwar mach ich jetzt grade ein dynamisches Balkendiagramm dessen Balken ich nicht richtig positioniert bekomme. Sie ordnen sich immer automatisch oben in der div an. Wenn ich sie auf Position: absolute; stelle ordnen sie sich unten an, aber alle an erster Stelle ineinander. Die Höhe und Breite der Balken wird automatisch der Datenbank angepasst.

Es gibt noch eine übergeordnete div und einige die neben dem Chart platziert sind.

#Chart{
    background-color:white;
    margin-left: 8%;
    width: 90vw;
    height: 92%;
    position:relative;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
    border-radius: 2px;
    border-color: black;
    //clear: both;
    padding-bottom: 1px;
   // overflow: hidden;
}
#bars{
    margin-left: 1%;
    margin-right: 1%;
    background-color: #edda4e;
    float: left;
    bottom: 0;
    }

Bsp:

<div id="Chart">
<div id="bars" style="height:100%; width:50%;"></div>
<div id="bars" style="height:25%; width:50%;"></div>
<div id="bars" style="height:75%; width:50%;"></div>
<div id="bars" style="height:33%; width:50%;"></div>
</div>