Question

Why won’t first div in this html display as a column next to the rest of the html that is float:right?

<div style="padding-top:20px; float:left; width:50%; clear:both">Column 1</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
  <label for="title">
    <h3 style="text-align:left">Column 2</h3>
  </label>
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
  <input type="text" maxlength="255" value="">
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;">
  <label for="body">
    <h3 style="text-align:left">Column 2</h3>
  </label>
</div>
<div class="" style="padding-bottom: 10px; padding-right:20px; width:50%; float:right; clear:both;">
  <textarea maxlength="60000"></textarea>
</div>

Column 1 line forces column 2 down as shown here:

http://jsfiddle.net/coder/UQXvC/

Answer 1

The padding of a box adds to its total width.

A box with the following CSS applied:

.box {
    width: 50px;
    padding: 50px;
}

will be 150px wide.

---

Since you’re adding padding to your columns, they are effectively wider than 50%, and can’t fit on the same row anymore.