TL;DR just click on this link
I'm having a problem with my input elements - they seem to be on strike and not working properly. I've simplified the code to focus on the variables, and while I found some solutions that work, I believe there's still something else causing the issue...
Here is the HTML and CSS following guidelines:
<div class="fl half">
<div class="input-wrap">
<input />
</div>
<div class="input-wrap">
<input />
</div>
<div class="clear"></div>
</div>
<div class="fr half">
<div class="input-wrap">
<input />
</div>
<div class="input-wrap"
> <input />
</div>
<div class="clear"></div>
</div>
<div class="input-wrap">
<select>
<option>Select</option>
</select>
</div>CSS Code:
.fl { float: left; }
.fr { float: right; }
.half { width: 50%; }
input { border: 1px solid black; }
.input-wrap { margin-bottom: 14px; position: relative; }
.clear { clear: both; }