Within the html structure below, there are two nested divs with the class "ejector". One of these ejector divs contains the word "female" while the other contains "male." My goal is to have these words displayed not against the colored backgrounds (pink and green respectively), but rather against the white background after the bars end. Specifically, the word "females" should be positioned on the white background right after the green bar ends (while keeping the number 25 on the green bar). In an attempt to achieve this, I applied a float:right and set a margin-right value of -15 to the ejector class, hoping it would move outside the boundary of the nested div (yet remain on the same line) so that the words appear on the white background. However, this approach did not work as expected. You can view the current setup in this fiddle http://jsfiddle.net/mjmitche/kpPbE/10/
Could you provide guidance on how to accomplish my intended outcome?
In addition, I also attempted to eliminate the nested div by positioning it next to the div featuring the desired background color using a float:left. Nevertheless, the text ended up appearing below the intended colored background http://jsfiddle.net/mjmitche/kpPbE/12/
<div class="chart" style="width:800px; margin-left:auto; margin-right:auto">
<h4 style="width:600px; margin-left:auto; margin-right:auto">Visitors to StackOverflow</h4>
<div class="pink" style="width: 50px;">25 <div class="ejector">females</div></div>
<div class="green" style="width: 30px;">15 <div class="ejector">males</div></div>
</div>
CSS
.chart div {
text-align: right;
padding: 3px;
margin: 1px;
color: #000;
width: 600px;
}
.green {
font: 15px sans-serif;
background-color: green;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
height: 20px;
line-height: 20px;
}
.pink {
font: 15px sans-serif;
background-color: #f5c5f2;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
height: 20px;
line-height: 20px;
}
.ejector{
float:right;
margin-right: -15px;
}