title: Floating div's left or right depending on variable WITHOUT columns
body: <p>I'm modifying my current build of one of my pages where there are X amount of boxes with varying content in each box, some float to the left, some float to the right and some fill the whole column space. The way this is currently done is like this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="doubleColumn"&gt;
      &lt;div class="contentBox"&gt;&lt;/div&gt;
      &lt;div class="contentBox"&gt;&lt;/div&gt;
  
      &lt;div class="singleColumn left"&gt;
          &lt;div class="contentBox"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="singleColumn right"&gt;
          &lt;div class="contentBox"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.doubleColumn {
      float: left;
      width: 100%;
  }
  
  .singleColumn {
      width: 49%;
  }
  
  .contentBox {
      border: 1px solid RGB(0, 0, 0);
      box-sizing: border-box;
          -moz-box-sizing: border-box;
      margin-bottom: 20px;
      padding: 10px;
      width: 100%;
  }
  
  .left {
      float: left;
  }
  
  .right {
      float: right;
  }
  </code></pre>
  
  <p>For the current solution there is no issues as the layout works perfectly and if below the left and right columns i wanted to add another 2 wider content boxes, i simply add those, then perhaps another 2 inside a left column below that. The issue comes when i try to assign variables to determine which box goes where, because i'm trying to make it so we can adjust each box to be either at the top, bottom or middle or wherever else we wish it to be, and also adjust whether it sits on the left, right or fills the whole box. I got a "half-working" solution in which i use the  to run a check that if a boxes position equals one, it fills the space, if it equals 2 it floats left and if it equals 3 it floats right. I'll demonstrate once again below:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;cfquery datasource="datasource" name="boxes"&gt;
      Select *
      From boxes
      Order by box_order
  &lt;/cfquery&gt;
  
  &lt;div class="doubleColumn"&gt;
      &lt;cfoutput query="boxes"&gt;
          &lt;cfif box_position eq 1&gt;
              &lt;div class="contentBox"&gt;&lt;/div&gt;
          &lt;cfelseif box_position eq 2&gt;
              &lt;div style="clear: left; float: left; width: 49%;"&gt;
                  &lt;div class="contentBox"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;cfelseif box_position eq 3&gt;
              &lt;div style="clear: right; float: right; width: 49%;"&gt;
                  &lt;div class="contentBox"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/cfif&gt;
      &lt;/cfoutput&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if I have two in a row that float left, then one that float right it (as it would) floats next to the second one on the left rather than the first one because of using clear, but if i don't use clear then the second left will sit alongside the first left. I'm stuck and don't know how to solve this issue.</p>