Correct CSS Positioning and layout

Question

Question

How can i get the .skillTitle to sit above the .chart and not next to it?

Code

<span class="skillTitle">PHP</span>
 <div class="chart" data-percent="80">
  <span class="percent">80%</span></div>

Preview

$(function() {
    $('.chart').easyPieChart({
	easing: 'easeOutElastic',
    barColor: '#207cca',
	trackColor:	'#f2f2f2',
	scaleColor:	false,
	lineCap: 'square',
	lineWidth:	'10'
    });
});

.chart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
   
    margin-bottom: 50px;
	margin-left:10px;
    text-align: center;
}
.chart canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.percent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
}


.skillTitle {
 
   position:relative;
   
    z-index: 2;
	font-weight:bold;
	
	
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>

<span class="skillTitle">HTML</span>
  <div class="chart" data-percent="73"> 
  <span class="percent">73%</span></div>
  
  <span class="skillTitle">PHP</span>
  <div class="chart" data-percent="80">
  <span class="percent">80%</span></div>

Answer 1

To have the titles displayed above each chart, but still have the charts side-by-side, you want to wrap the pairs in a container, and also set display: block on .skillTitle:

$(function() {
    $('.chart').easyPieChart({
	easing: 'easeOutElastic',
    barColor: '#207cca',
	trackColor:	'#f2f2f2',
	scaleColor:	false,
	lineCap: 'square',
	lineWidth:	'10'
    });
});

.skillTitle {
  font-weight: bold;
  display: block;
  margin-bottom: 1em;
}

.ctr {
  text-align: center;
  display: inline-block;
}

.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
   
  margin-bottom: 50px;
  margin-left:10px;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>

<div class="ctr">
  <span class="skillTitle">HTML</span>
    <div class="chart" data-percent="73"> 
    <span class="percent">73%</span></div>
</div>
  
<div class="ctr">
  <span class="skillTitle">PHP</span>
  <div class="chart" data-percent="80">
  <span class="percent">80%</span></div>
</div>

Answer 2

The easiest way is to use block-level element for the chart title, e.g. <p> or <div>. Because you've used a <span>, which is an inline element, and set the following <div> element to display as an inline block, the two elements display side by side.

To fix:

HTML:

<p class="skillTitle">PHP</p>
<div class="chart" data-percent="80">
  <span class="percent">80%</span>
</div>

CSS:

.skillTitle {
    font-weight:bold;
}

No need to use the position:relative or z-index unless they are specifically required.

JSFiddle