This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the same pattern, the third (bottom) div should start where the middle div ends. As the top and middle divs are both 120px wide, the margin-left: for the bottom div is set to 120px. Despite these settings, as demonstrated in this jsfiddle, all three divs begin at the left edge rather than with the intended indent of pixels.
I'm looking for the correct method to achieve this desired effect without resorting to my current cumbersome approach. (Note that the divs should each remain on separate lines, not combined into a single line)
HTML
<div class="another_chart">Blah blah graph
<div class="another_blue" style="width: 75px;">25</div>
<div class="another_pink" style="width: 45px;">15</div>
<div class="another_yellow" style="width: 60px;">20</div>
</div>
CSS
.another_chart div {
text-align:right;
padding:3px;
margin:1px;
color:#000;
width:600px
}
.another_blue {
font:15px sans-serif;
background-color:#4682b4;
text-align:right;
padding:3px;
margin:1px;
color:#fff;
height:20px;
line-height:20px
}
.another_pink {
font:15px sans-serif;
background-color:#f5c5f2;
text-align:right;
padding:3px;
margin-left:75px;//the middle div should start 75px from the left color
height:20px;
line-height:20px
}
.another_yellow {
font:15px sans-serif;
background-color:#ebfa02;
text-align:right;
padding:3px;
margin-left:120px;//the bottom div should start 120px from the left
color
height:20px;
line-height:20px
}