title: two divs appearing on the same line
body: <p>In the html below, there's two nested divs with a class "ejector". In side one of the ejector class divs is the word "female" and in the other "male." I want those words to appear not against the colored backgrounds (pink and green respectively) but rather against the white after the bars end. The word "females" should appear on the white background just after the green bar ends (but the number 25 stays on the green bar). In order to achieve that I gave the ejector class a <code>float:right</code> and a value of <code>-15</code> for a margin-right, hoping that would push it outside the boundary of the nested div (but keep it on the same line) so the words appear on the white backgorund. It didn't work. You can see in this fiddle <a href="http://jsfiddle.net/mjmitche/kpPbE/10/" rel="nofollow">http://jsfiddle.net/mjmitche/kpPbE/10/</a></p>
  
  <p>Can you tell me how to achieve what I'm trying to achieve</p>
  
  <p>Note, I also tried to remove the nested div and just position it next to the div with the desired background color with a <code>float:left</code> but the text appeared below the desired colored background <a href="http://jsfiddle.net/mjmitche/kpPbE/12/" rel="nofollow">http://jsfiddle.net/mjmitche/kpPbE/12/</a></p>
  
  <pre><code>&lt;div class="chart" style="width:800px; margin-left:auto; margin-right:auto"&gt;
      &lt;h4 style="width:600px; margin-left:auto; margin-right:auto"&gt;Visitors to StackOverflow&lt;/h4&gt;
  
      &lt;div class="pink" style="width: 50px;"&gt;25 &lt;div class="ejector"&gt;females&lt;/div&gt;&lt;/div&gt;
      &lt;div class="green" style="width: 30px;"&gt;15 &lt;div class="ejector"&gt;males&lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>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;
  
    }
  </code></pre>