Submit form fields overlapping - html

Question

I'm having trouble reformatting this form, two of the fields overlap in the middle and I can't for the life of me figure out why, or how to fix it. The form itself works perfectly fine, it's just the alignment that's wrong. I'm not sure if the new CSS doesn't like the spray fields and that's causing the issue. I applied this style to a couple of other forms on our site and they swapped over without a hitch, it's just been this one fighting me. I've tried using <br> and that doesn't change the issue
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
}
<center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br />

Answer 1

There was some style in your form
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
They have 50% width, that's why there have another 50% of the width, for that reason they were overlapping
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
}
<center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br />