CSS bar graph - very simple - css

Question

I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".
<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
</div>
I don't want to use a library or JS add on. Keeping this light weight is mission critical.
Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,

Answer 1

First of all, separate your CSS from your HTML. You're repeating too much code when you could just use a bar class for your inner divs.
bottom: 0 doesn't change anything for relatively positioned div.
If you wish to use relative positioning, get rid of float and bottom and use display: inline-block and vertical-align: baseline;. Also, in this case, you need to get rid of any space in the HTML between the inner divs (newline).
Like this (you can see the demo at http://dabblet.com/gist/2779082 ):
HTML
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
CSS
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}

Answer 2

I would personally avoid setting xpos explicitly on every element, makes things less maintainable. In some scenarious percentage-basedvalue dumps would be more appropriate too. With that in mind, an imo more scalable and semanticaly correct approach has been mocked up in a fiddle. HTML:
<ul class="graph">
<li><span style="height:45%"></span></li>
<li><span style="height:12%"></span></li>
<!--as many more items as you want !-->
</ul>
and CSS:
.graph {
border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
width:8px; height:50px; /*set a bar width and a full height*/
float:left; /*to have bars "left-aligned"*/
position:relative; /*needed for the actual bar fill element*/
margin:2px;
}
.graph li+li {
margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
}
.graph span {
position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
widths will be set inline*/
background-color: #aeaeae;
}
This also gives you potential to get quite fancy - bars could have content with a negative text indent for semantic value or <span> elements could be abandoned altogether in favor of pseudo-elements.

Answer 3

Kolink's answer is correct. Each bar div's width is 8px, plus margin-left and margin-right, 8+1+1=10px. So I suggest, set the left value to 0px, 10px, 20px ...
<div class="wrapper">
<div style=" left:0px;height:22px;"></div>
<div style="left:10px;height:11px;"></div>
<div style="left:20px;height:6px;"></div>
<div style="left:30px;height:49px;"></div>
<div style="left:40px;height:28px;"></div>
</div>
The css should look like this(I grouped some general css rules):
.wrapper{
border: 1px solid #aeaeae;
background-color: #eaeaea;
width: 50px;
height: 50px;
position : relative;
}
.wrapper > div{
bottom: 0px;
width: 8px;
position : absolute;
background-color: #aeaeae;
margin: 1px;
display : inline-block;
}
You can check this link: http://jsfiddle.net/zhujy_8833/AFbt4/ to see the result of the above code.

Answer 4

If you give the parent position: relative, then you can use position: absolute for child div to place them in precise coordinates by setting left, top, right, bottom, width, height you can precisely control the placement of the bars in your bar chart.
.graph {
position: relative;
width: 54px;
height: 54px;
border: 1px solid blue;
background-color: lightgrey;
}
.bar {
position: absolute;
border: 1px solid blue;
background-color: yellow;
}
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
<div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
<div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
<div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
<div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
</div>
</div>
<p></p>
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
<div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
<div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
<div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
<div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
</div>
</div>

Answer 5

Use position: absolute, and instead of float:left; use left: 0px;, 8px, 16px and so on.
Also add position: relative to the container.