Grid using float left is leaving gaps - html

Question

I have a simple css which floats elements to the left and creates a table structure. I wanted the table to be dynamic, being able to add a column if the user expands the browser so I have used elements that float left. However it sometimes does not work. I have created a jsfiddle that shows the scenario.
It works for one column, two columns but it does not work for three columns and it leaves a gap.
I cannot understand why it is leaving that gap. Here's the fiddle
http://jsfiddle.net/workmonitored/hgt9Lp5n/12/
html
<div style="margin-left:5px;margin-right:15px">
<div class="keepTogether">
<div class="description">Flows 1:</div>
<div class="userOutput">
<input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
</div>
</div>
<div class="keepTogether">
<div class="description">Flows 2:</div>
<div class="userOutput">
<input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
</div>
</div>
<div class="keepTogether">
<div class="description">Flows 3:</div>
<div class="userOutput">
<input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
</div>
</div>
<div class="keepTogether">
<div class="description">Flows 4:</div>
<div class="userOutput">
<input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
</div>
</div>
<div class="keepTogether">
<div class="description">Employee Name:</div>
<div class="userOutput">
<input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName" style="width: 90%">
</div>
</div>
<div class="keepTogether">
<div class="description">Affiliation</div>
<div class="userOutput">
<select>
<option value="1">Member</option>
<option value="1">Member Spouse</option>
</select>
</div>
</div>
<div class="keepTogether">
<div class="description">Job Title</div>
<div class="userOutput">
<select>
<option value="1">Mr smith</option>
<option value="1">Mrs smith</option>
</select>
</div>
</div>
<div class="keepTogether">
<div class="description">Classification</div>
<div class="userOutput">
<select>
<option value="1">Worker Bee</option>
<option value="1">Grasshoper Initiate</option>
</select>
</div>
</div>
<div class="keepTogether">
<div class="description">Hire Date</div>
<div class="userOutput">
<input type="text" id="hiredate" name="DetailProjectReportingPeriodDetailEditUI.hireDateStr" style="width: 90%">
</div>
</div>
<div class="keepTogether">
<div class="description">Job Status</div>
<div class="userOutput">
<input type="text" id="hiredate" name="DetailProjectReportingPeriodDetailEditUI.hireDateStr" style="width: 90%">
</div>
</div>
<div class="keepTogether">
<div class="description">Pay Scale</div>
<div class="userOutput">
<input name="DetailProjectReportingPeriodDetailEditUI.payScale" size="12">
</div>
</div>
<div class="keepTogether">
<div class="description">Notes</div>
<div class="userOutput">
<textarea rows="1" name="DetailProjectReportingPeriodDetailEditUI.note" style="width: 99%"></textarea>
</div>
</div>
<div style="clear:both; height:5px"></div>
<div class="keepTogether">
<button id="saveReportingPeriodDetail">Save</button>
<button id="cancelReportingPeriodDetail">Cancel</button>
</div>
css
.description {
width: 120px;
float: left;
}
.userOutput {
width: 240px;
float: left;
}
.userInput {
width: 240px;
float: left;
}
.keepTogether {
display:inline;
float:left;
margin-bottom: 2px;
}
.keepTogether select {
width: 220px;
}
.keepTogether input {
width: 120px;
float: left;
}
Thanks in advance.

Answer 1

Setting the margin on input and select elements to 0 sorted out the issue also.
.keepTogether input {
width: 120px;
float: left;
margin: 0;
}
http://jsfiddle.net/hgt9Lp5n/13/