HTML form elements not properly aligned

Question

After spending hours and hours I turned out to have this form and I just feel hopeless now...I can't figure out what to do or why the spaces are so messed-up and just lost...

http://jsfiddle.net/C7u9P/2/

I posted picture of what I am trying to make it look like and how it currently looks.... T_T

Any help on what to do or whats wrong is appreciated. The Awesome Form:

My form:

Answer 1

If you want to recreate something it is better to start completely over at times. The generated code from java was certainly too complex to try and convert.

So heres a setup you could start out with:

http://jsfiddle.net/MwnSn/11/

I'll let you do the details yourself, the icons shouldn't be too hard and styling the inputs is possible too ofcourse. Be aware that I made use of the style normalization done by jsfiddle, I recommend using that stylesheet in your own work too. Only really tested in Chrome so you might want to check and debug IE, and it will probably break down when limited in width. Using the proper clearfix would also improve it a little. (overflow:auto to clear floats in that div.)

No tables.