title: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
body: <h2>My Question(s)</h2>
  
  <ol>
  <li><p>Are any of these methods preferred by a professional web designer?</p></li>
  <li><p>Are any of these methods prefereed by a web browser when drawing the website?</p></li>
  <li><p>Is this all just personal preference?</p></li>
  <li><p>Are there other techniques I'm missing?</p></li>
  </ol>
  
  <p><em>Note: Above questions are in regards to designing a multi-column layout</em></p>
  
  <hr>
  
  <h2>float:left;</h2>
  
  <p><a href="http://jsfiddle.net/CDe6a/" rel="noreferrer">http://jsfiddle.net/CDe6a/</a></p>
  
  <p><img src="https://i.stack.imgur.com/oIMvg.png" alt="float:left image"></p>
  
  <p>This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to <code>clear:both;</code> afterwards. Another <em>con</em> that I just found was the inability to align text vertically.</p>
  
  <h2>display:inline;</h2>
  
  <p>This seems to correct the problem of the collapsing parent, but adds whitespace.</p>
  
  <p><a href="http://jsfiddle.net/CDe6a/1/" rel="noreferrer">http://jsfiddle.net/CDe6a/1/</a></p>
  
  <p><img src="https://i.stack.imgur.com/aDgsb.png" alt="display:inline image"></p>
  
  <p>Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.</p>
  
  <p><a href="http://jsfiddle.net/CDe6a/2/" rel="noreferrer">http://jsfiddle.net/CDe6a/2/</a></p>
  
  <p><img src="https://i.stack.imgur.com/qgnlL.png" alt="no html whitespace image"></p>
  
  <h2>display:inline-block;</h2>
  
  <p>Seems to behave exactly like <code>display:inline;</code>.</p>
  
  <p><a href="http://jsfiddle.net/CDe6a/3/" rel="noreferrer">http://jsfiddle.net/CDe6a/3/</a></p>
  
  <p><img src="https://i.stack.imgur.com/aDgsb.png" alt="display:inline-block image"></p>
  
  <h2>display:table-cell;</h2>
  
  <p><a href="http://jsfiddle.net/CDe6a/4/" rel="noreferrer">http://jsfiddle.net/CDe6a/4/</a></p>
  
  <p><img src="https://i.stack.imgur.com/BPtXn.png" alt="display:table-cell image"></p>
  
  <p>Works perfect.</p>
  
  <h2>My thoughts:</h2>
  
  <p>I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, <code>display:table-cell;</code> seems to work the best, and I think I will start replacing <code>float:left;</code> as I always seem to mess up on <code>clear:both;</code>. I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.</p>