I see that after adding this to my HTML form:
<label>
Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
...it becomes insatiable as to how much width it will take - the further I pull out the window in which the HTML resides (on the jsfiddle page, which is here:
http://jsfiddle.net/clayshannon/karpxwn2/11/[
^]), the wider the border around the box becomes, so that it no longer floats up to the right of the first form.
I tried giving the labels a max-width and wrapping them, like so:
label {
max-width: 200px;
wrap: true;
}
...but that did nothing.
Here is the entire second form:
<form class="borderedform">
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
<label>Form prepared by:</label>
<input type="text" id="formpreparedby" />
<label>Dept / Division</label>
<input type="text" id="deptdivision" />
<label>Email:</label>
<input type="email" id="email" />
<label>Ext:</label>
<input type="text" id="extension" />
<label class="reditalics">Required:</label>
<label>US Citizen - YES</label>
<input type="radio" id="uscitizenyes" value="YES" />
<label>NO</label>
<input type="radio" id="uscitizenno" value="NO" />
<input type="radio" id="visitor" />Visitor
<label>Foreign Visa Type:</label>
<select title="Please select a visa type">
<option value="pleaseselect">Please Select</option>
<option value="notapplicable">Not Applicable</option>
<option value="a1">A-1</option>
<option value="a2">A-2</option>
<option value="b1">B-1</option>
<option value="b2">B-2</option>
<option value="f1">F-1</option>
<option value="hib">H-1B</option>
<option value="h2a">H-2B</option>
<option value="h2b">H-3</option>
<option value="h3">J-1</option>
<option value="j1">P-1</option>
<option value="p1">P-2</option>
<option value="p2">P-3</option>
<option value="tn">TN</option>
</select>
<input type="radio" id="ucstudent" />UC Student
<input type="radio" id="ucemployee" />UC Employee
<label>UC Campus:</label>
<select title="Please select a campus">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
<label>
Note: If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
</form>
It works fine until that last label is added, so it's definitely the label that is the "culvert."