exploring <select> being too wide

it's related to the float: left, probably

by roryokane

HTML

<div id="viewport">
	<h2>A Form</h2>
	<fieldset>

		<div class="rpInputRow menu-like" id="divRowO_SECTION">
			<div class="rpLabel" id="divlblO_SECTION">
				<span id="RFLblO_SECTION">A menu</span>
				<span class="rpRequied" id="RequiredO_SECTION">*</span>
			</div>
			<div class="rpDDField" id="RFErrDivO_SECTION">
				<select onchange="" class="xxlarge input-46" id="RFDrpDownO_SECTION" name="RFDrpDownO_SECTION">
					<option value="-1" selected="selected"></option>
					<option value="1501">really long long long long long long long long long long long long long long long</option>
					<option value="3200">N/A</option>
					<option value="1480">Subcontractor</option>
					<option value="3181">Valley</option>
					<option value="3180">Ventura</option>
					<option value="3220">Very Newest Section</option>
					<option value="1481">Visitor</option>
				</select>
			</div>
		</div>

		<div class="rpInputRow menu-like" id="divRowO_SECTION">
			<div class="rpLabel" id="divlblO_SECTION">
				<span id="RFLblO_SECTION">Fake menu</span>
				<span class="rpRequied" id="RequiredO_SECTION">*</span>
			</div>
			<div class="rpDDField" id="RFErrDivO_SECTION">
                <span class="fake-select">really long long long long long long long long long long long long long long long</span>
			</div>
		</div>

		<div class="rpInputRow" id="divRowO_SECTION">
			<div class="rpLabel" id="divlblO_SECTION">
				<span id="RFLblO_SECTION">Just text</span>
				<span class="rpRequied" id="RequiredO_SECTION">*</span>
			</div>
			<div class="rpDDField" id="RFErrDivO_SECTION">
                <span class="just-text">some not-so-long text</span>
			</div>
		</div>
        
	</fieldset>
    <input type="button" class="resize-button" value="Resize Viewport"></input>
</div>

SCSS

// page visual styles
body {
    background: #eee;
    font-family: sans-serif;
}
#viewport {
    background: white;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid gray;
    
    width: 480px;
}
h2 {
    margin-left: 5%;
}
.resize-button {
    margin: 0.5em 5% 1em;
}

// form visual styles
fieldset {
    border: none;
    margin: 0 5% 5px;
    outline: 1px solid #99e;
}
.rpInputRow {
    margin-bottom: 7px;
    outline: 1px dashed #ccc;
}
.rpLabel {
    outline: 1px solid #e99;
}
.rpRequied {
    color: #e66;
}
.fake-select {
    outline: 1px solid #bbb;
    display: inline-block;
    white-space: nowrap;
    background: white;
}
div.rpDDField {
    outline: 1px solid #8c8;
}

// configuration for testing
#viewport {
    overflow: hidden;
    overflow: visible;
}
.menu-like {
    //display: none;
}

// relevant styles
.rpLabel {
    width: 24%;
    float: left;
}
div.rpDDField {
    margin-left: 26%;
    width: 74%;
    //float: left;
    clear: none;
}
select.xxlarge, .fake-select {
    max-width: 100%;
    //width: 100%;
    overflow: hidden;
}
option {
    
}

CoffeeScript

$('.resize-button').on 'click', ->
    $viewport = $('#viewport')
    normal_width = $viewport.width()
    width_difference = 100
    time_per_difference = 1000
    $viewport.animate {width: normal_width + width_difference}, time_per_difference, ->
        $viewport.animate {width: normal_width - width_difference}, 2 * time_per_difference, ->
            $viewport.animate {width: normal_width}, time_per_difference