Align inside div to bottom center to create bar chart effect - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Div Align

Description

Align inside div to bottom center to create bar chart effect

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container {<!--  ww w .ja  v a  2  s  .  c om-->
   border:2px solid Chartreuse;
   position:absolute;
   width:701px;
   height:201px;
}

.ruler {
   border:2px solid yellow;
   position:absolute;
   width:100%;
   height:100px;
   bottom:0px;
}

.ruler-mark-container {
   border:2px solid blue;
   position:relative;
   width:31px;
   height:100%;
   float:left;
   bottom:0px;
}

.ruler-mark-high {
   position:absolute;
   border:2px solid pink;
   background-color:WhiteSmoke;
   bottom:0px;
   width:4px;
   height:51px;
}

.ruler-mark-short {
   position:absolute;
   border:2px solid OrangeRed;
   background-color:grey;
   bottom:0px;
   width:4px;
   height:26px;
}

.ruler-mark-short, .ruler-mark-high {
   left:51%;
   margin-left:-2.6px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="ruler"> 
    <div class="ruler-mark-container"> 
     <div class="ruler-mark-high"></div> 
    </div> 
    <div class="ruler-mark-container"> 
     <div class="ruler-mark-short"></div> 
    </div> 
    <div class="ruler-mark-container"> 
     <div class="ruler-mark-short"></div> 
    </div> 
    <div class="ruler-mark-container"> 
     <div class="ruler-mark-short"></div> 
    </div> 
    <div class="ruler-mark-container"> 
     <div class="ruler-mark-short"></div> 
    </div> 
    <div class="ruler-mark-container"> 
     <div class="ruler-mark-high"></div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials