CSS graph is very simple

Question

I have a very simple code and it works, except that everything is aligned to the top ... ideally, the bars are aligned to the bottom. I suppose I could use fixed positioning, since the sizes of the squares are 50px by 50 pixels, but I would 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 do not want to use the library or add JS. Keeping this light weight is critical.

I would also prefer the bars to be vertical. Any CSS guru who wants to shed some light seems to be gone? I am googled and most of the examples are far complicated / complex,

Answer 1

First of all, separate your CSS from your HTML. You repeat too much code when you can just use the bar class for your inner divs.

bottom: 0 does not change anything for a relatively positioned div.

If you want to use relative positioning, get rid of float and bottom and use display: inline-block and vertical-align: baseline; . In addition, 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

Correct answer. Each bar separator width is 8px, plus margin-left and margin-right, 8 + 1 + 1 = 10px. Therefore, I suggest setting 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> 

Css should look like this (I have 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 3

I would personally avoid installing xpos explicitly on each element, making things less convenient. In some percent based scenarios, they will be more appropriate. With that in mind, imo a more scalable and semantically correct approach was fiddle- wise. 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; } 

It also gives you the opportunity to get some pretty fancy bars that may contain negative text indented content for semantic values, or <span> elements can be completely eliminated in favor of pseudo elements.

Answer 4

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

Answer 5

If you give the parent element position: relative , you can use position: absolute for the child div to place them in exact coordinates, setting left , top , right , bottom , width , height you can precisely control the placement of bars on the histogram.

 .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>