title: How to float a span in a div?
body: <p>I'm trying to learn how to actually use CSS without the help of Bootstrap.</p>
  
  <p>I have the following: (can be viewed here: <a href="http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview" rel="noreferrer">http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview</a>)</p>
  
  <pre><code>&lt;div class="block"&gt;
    &lt;span class="pull-left"&gt;George&lt;/span&gt;
    &lt;span class="pull-right"&gt;$23.20&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="block"&gt;
    &lt;span class="pull-left"&gt;Carl&lt;/span&gt;
    &lt;span class="pull-right"&gt;$4.81&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="block"&gt;
    &lt;span class="pull-left"&gt;Steve&lt;/span&gt;
    &lt;span class="pull-right"&gt;$0.34&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS...</p>
  
  <pre><code>.pull-left {
      float: left;
  }
  
  .pull-right {
      float: right;
  }
  
  .block {
      display: block; /* since, div, I don't need this right ?*/
      background-color: #87CEEB;
      width: 100%;
  }
  </code></pre>
  
  <p>If I was using Bootstrap, I could achieve the desired effect, by putting my html in a <code>container</code> div and instead of using my custom class of <code>block</code>, add the class <code>btn</code> and <code>btn-block</code>.</p>
  
  <p>I want to have the names align vertically on the left and the prices align vertically on the right. What am I missing?</p>
  
  <p>Sort of like:</p>
  
  <pre><code>George                                     $23.20
  Carl                                        $4.81
  Steve                                       $0.34
  </code></pre>
  
  <p>Please don't mention tables, like I said, I could use bootstrap and wrap the above html in <code>div.container</code>, and then use <code>button.btn.btn-block</code> instead of my <code>div.block</code> to achieve the exact same effect. Thanks.</p>
  
  <p><strong>Update 1:</strong> </p>
  
  <p>OK, I didn't expect there to be more than maybe one or two solutions, but there's quite a bit. Can someone explain the pros/cons of each solution? I'm really at a loss here.</p>
  
  <p><strong>Solution #1:</strong></p>
  
  <p>Add a <a href="https://stackoverflow.com/a/17938339/10333">new div element</a>:</p>
  
  <pre><code>&lt;div class="block"&gt;
    &lt;span class="pull-left"&gt;George&lt;/span&gt;
    &lt;span class="pull-right"&gt;$23.20&lt;/span&gt;
    &lt;div style='clear:both'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Solution #2:</strong></p>
  
  <p>Add <code>clear:both; overflow:auto;</code> to the <code>block</code> class by <a href="https://stackoverflow.com/users/2129835/thgaskell">thgaskel</a></p>
  
  <p><strong>Solution #3:</strong></p>
  
  <p>This one seems to create margins between the blocks.</p>
  
  <p><a href="https://stackoverflow.com/a/17938338/10333">Change</a> <code>display:block</code> to <code>display:inline-block</code> for the <code>block</code> class.</p>
  
  <p><strong>Solution #4:</strong></p>
  
  <p><a href="https://stackoverflow.com/a/17938377/10333">Add</a> <code>float:left</code> to the <code>block</code> class.</p>
  
  <p><strong>Solution #5:</strong></p>
  
  <p>Discovered this one while messing around. Create a new selector:</p>
  
  <pre><code>.block:after {
    content: ":" /* &lt;--- at a complete loss why this works */ 
  }
  </code></pre>
  
  <p><strong>Solution #6:</strong></p>
  
  <p>Discovered this one from reading <a href="http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php" rel="noreferrer">this page</a>.</p>
  
  <pre><code>.block:after {
    content:"";
    display: table;
    clear: both;
  }
  </code></pre>
  
  <p>I'm feeling pretty overwhelmed and am not sure which to pick. Thanks.</p>