Working with floats and forms - css

Question

I've set up some custom css for a advanced form I have with a website I'm creating, however no matter which way I go about it the labels and fields do not seamlessly float the the left.
This is the page and below is my css for the formatting of the gravity forms
.gform_wrapper ul li.gfield.gsection {
clear: both;
width: 100%;
margin-top:1.4em;
}
.gform_wrapper ul li.gfield {
clear: none!important;
}
.entry-content .gform_fields li {
margin-right: .8em;
float: left!important;
margin: .5em;
}
.gfield.full-width {
//border: 1px solid blue;
width: 100%!important;
display: block;
}
.ginput_container input {
height: 2em;
width: 100% !important;
}
div.gform_wrapper input[type="email"], div.gform_wrapper input[type="text"], div.gform_wrapper textarea, div.gform_wrapper .ginput_complex label {
padding: 0 0 0 .5em;
}
.gform_wrapper.gf_browser_gecko ul.gform_fields li.gfield div.ginput_complex span.ginput_left select, .gform_wrapper.gf_browser_gecko ul.gform_fields li.gfield div.ginput_complex span.ginput_right select, .gform_wrapper.gf_browser_gecko ul.gform_fields li.gfield select {
width: 100%;
}
I have a few mobile styles in my media queries for the phones but tablets up to the desktop doens't look as good as I'd like it to.
You can see the screenshot below as to the way it's looking when I resize the window just a tiny bit.
I just want the .gform_fields li to properly float left so that if there isn't any more room on that line to float all the way to the left on the next line, instead of showing up to the right on the line underneath.
If anyone could provide some insight as the the best way to make these fields float left at all times that would be appreciated!

Answer 1

From what I see (and if I understood correctly), this is really not a problem with the floating to the left. The real issue is that the dropdowns are 5 pixels higher than the text fields.
So, if you set a min-height for the gfield (e.g.: 71px that is the height of the li with a select box), the problem is solved:
.gform_wrapper ul li.gfield {
clear: none!important;
min-height:71px;
}
There's still a problem with the calendar icon that needs to be fixed. Maybe you could prevent the new line with something like white-space: nowrap. But it would require some testing.
I hope it helps. Good luck!

Answer 2

It turns out, as Monty82 had poitned out, that I needed a min-height on the li element, however neither or us were selecting the right name
.entry-content .gform_fields li {
**min-height: 90px !important;**
margin-right: .8em;
float: left!important;
margin: .5em;
}
As for the date picker, I had set an explicit width of 100% of ALL li fields, which over writes the 80% width I was giving the date-picker-li field. CSS is a cascading style (so after some testing) I realize that if I have my classes like this
.ginput_container input {
height: 2em;
width: 100%;
}
.gform_wrapper input.datepicker.datepicker_with_icon {
width: 80% !important;
}
It works great!