title: CSS: Why don't these two div (or span) elements float next to each other
body: <p>In the following code, I need the div elements <code>#ldiv</code> and <code>#rdiv</code> to be placed next to each other. </p>
  
  <p>So I am using the CSS <code>float</code> property. I <a href="https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other">looked up this answer</a>, and I think I am following it, but still the div's won't position next to each other. The second <code>div</code> displays in the next line. </p>
  
  <p>Then I thought that <code>div</code> is a block level element, so I replaced the <code>div</code> by <code>span</code> elements. But that did not help either.</p>
  
  <p><a href="http://jsfiddle.net/41209azo/" rel="nofollow noreferrer"><strong>JSFiddle here.</strong></a></p>
  
  <pre><code>&lt;div style="padding:25px; width:400px;"&gt;
  
      &lt;div style="background-color:#bf5b5b;"&gt;
      &lt;span&gt;Yes&lt;/span&gt;
      &lt;span&gt;No&lt;/span&gt;&lt;/div&gt;
  
          &lt;div id="option_one_div"&gt;
              &lt;div id="ldiv" style="float:left; background-color:#74d4dd; width:150px;"&gt;
              &lt;label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;"&gt;
                  &lt;input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/&gt;&lt;/label&gt;
              &lt;label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;"&gt;
                  &lt;input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px"&gt;
              &lt;span&gt;Label of first group of Radio Buttons radio buttons.&lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>