Left align label and 2 column after first few rows

Okay, was looking at your form and it disappeared. Guess you're working on it. Yes, you're CSS is kinda whack.

From what I saw, disregarding what you're trying to do with the madlib format at the top, you were getting closer.

What I suggest is copying the entire contents of the forms.css file from the plugin folder to your themes style.css file or making a new local copy of the forms.css and linking it up. Then, go to the form settings page and set the "output css" option to no. That way you're using only your local copy and you can make all the modifications you like without having to overwrite the other styles or worry about your customizations being overwritten when the plugin updates.

So, he's the idea on the columns, you take the fields that you want to make columns.. in this 2 columns.. let say you have 5 fields.. so it would be something like this. You need to set the width, height, etc. on all of them the same so they float properly. Then, you only float every other one left so the second one will clear the float properly.

Sample CSS

/* apply widths and heights to all */
#gform_wrapper_1 #field_1_7,
#gform_wrapper_1 #field_1_8,
#gform_wrapper_1 #field_1_9,
#gform_wrapper_1 #field_1_10,
#gform_wrapper_1 #field_1_11,
#gform_wrapper_1 #field_1_12 {width:45%; height:200px;}

/* only float the first one in each row */
#gform_wrapper_1 #field_1_7,
#gform_wrapper_1 #field_1_9,
#gform_wrapper_1 #field_1_11 {float:left; margin-right:10px;}

That's really all there is to it other than just tweaking things to your preference.

Back to the madlib style format for the initial information, I would suggest using the inline HTML fields for the textual content before/between the inputs and just float all of the containing <li >'s so they're inline. You can use CSS to hide the actual field labels and won't have to do a lot of fancy stuff to override those label properties.

Hope that points you in the right direction.

No worries. I'm happy to help out. Let us know how it goes.

looks like you need to set the width of each list item individually for them to float up the way you want. You'll probably want to define a height on those as well so they float properly and don't "hang" and give you that staggered/stacked look.

You would center align the submit button just like you would any element, by setting the text-align to center on the container. For the submit button this would be the gform_footer container.

Add this to your CSS:

.gform_footer {text-align: center;}

Drop downs can be changed with CSS, however it isn't supported by all the browsers so it isn't consistent and not necessarily recommended if you want to be sure things look the same for all users.

Here is information on how to style a drop down:

http://www.456bereastreet.com/lab/form_controls/select/

You would have to target the options of the select fields. You would do so using this selector:

.gfield_select option {your-styles: here;}