I am designing a html form using JSP. Below is my css file-\[code\]body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}p,h1,form,button { border: 0; margin: 0; padding: 0;}.spacer { clear: both; height: 1px;}/* ----------- My Form ----------- */.myform { margin: 0 auto; width: 400px; padding: 14px;}/* ----------- stylized ----------- */#stylized { border: solid 2px #b7ddf2; background: #ebf4fb;}#stylized h1 { font-size: 14px; font-weight: bold; margin-bottom: 8px;}#stylized p { font-size: 11px; color: #666666; margin-bottom: 20px; border-bottom: solid 1px #b7ddf2; padding-bottom: 10px;}#stylized label { display: block; font-weight: bold; text-align: right; width: 140px; float: left;}#stylized .small { color: #666666; display: block; font-size: 11px; font-weight: normal; text-align: right; width: 140px;}#stylized input { float: left; font-size: 12px; padding: 4px 2px; border: solid 1px #aacfe4; width: 200px; margin: 2px 0 20px 10px;}#stylized button { clear: both; margin-left: 150px; width: 125px; height: 31px; background: #666666 url(img/button.png) no-repeat; text-align: center; line-height: 31px; color: #FFFFFF; font-size: 14px; font-weight: bold;}\[/code\]Below is the form that I am building using JSP.\[code\]<div id="stylized" class="myform"> <form:form id="form" name="form" method="POST" action="/showResponse"> <h1>Service call Form</h1> <p></p> <form:label path="userId">User Id <span class="small">Enter User Id</span> </form:label> <form:input name="name" id="name" path="userId" /> <form:label path="debugFlag">Debug Flag : <span class="small">Select Debug Flag</span> </form:label> <form:checkbox path="debugFlag" name="name" id="name" /> <form:label path="attributeNames">Attribute Names : <span class="small">Select Attribute Names</span> </form:label> <form:select path="attributeNames" items="${attributeNamesList}" multiple="true" name="name" id="name" /> <form:label path="machineName">Machine Name <span class="small">Enter Machine Name</span> </form:label> <form:input name="name" id="name" path="machineName" /> <form:label path="portNumber">Port Number <span class="small">Enter Port Number</span> </form:label> <form:input path="portNumber" name="name" id="name" /> <button type="submit">Submit</button> <div class="spacer"></div> </form:form> </div>\[/code\]The only problem that I am facing is, it's not aligned properly with it's label and corresponding input. Below is the screenshot-
Only user id and debug flag are assigned properly. Other than that, it's messed up somehow. Can anyone tell me what wrong I have done in CSS?Actual HTML Code after doing view page source-\[code\]<html><head><link href="http://stackoverflow.com/ressvr/z/yw/gk5mdanssyzg3bwvk3w1jz10s.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="layout" content="main" /> <title>Sample App</title></head><body><div id="stylized" class="myform"> <form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1> <p></p> <label for="userId">User Id <span class="small">Enter User Id</span> </label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div> <label for="debugFlag">Debug Flag <span class="small">Select Debug Flag</span> </label><input id="name" name="debugFlag" name="name" type="checkbox" value="http://stackoverflow.com/questions/14468701/true"/><input type="hidden" name="_debugFlag" value="http://stackoverflow.com/questions/14468701/on"/><div class="spacer"></div> <label for="attributeNames">Attribute Names <span class="small">Select Attribute Names</span> </label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="http://stackoverflow.com/questions/14468701/PROFILE.ACCOUNT">ACCOUNT</option><option value="http://stackoverflow.com/questions/14468701/PROFILE.ADVERTISING">ADVERTISING</option><option value="http://stackoverflow.com/questions/14468701/PROFILE.CLV_INFO">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="http://stackoverflow.com/questions/14468701/1"/><div class="spacer"></div> <label for="machineName">Machine Name <span class="small">Enter Machine Name</span> </label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div> <label for="portNumber">Port Number <span class="small">Enter Port Number</span> </label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div> <button type="submit">Submit</button> <div class="spacer"></div> </form></div></body></html>\[/code\]