Trying to get my radio buttons to line up - javascript

Alright so I'm doing a freecodecamp project of a survey. The codepen that
they want your survey to function like is this
https://codepen.io/freeCodeCamp/pen/VPaoNP. I currently have mine looking
like https://codepen.io/anon/pen/qvQLZx.
my css
#title {
text-align:center;
}
#description {
text-align:center
}
#survey-form {
text-align:center;
}
.leftsidequestions {
display:inline-block
margin:auto;
text-align:right;
}
#number {
width:9%;
}
My problem right now is that I want
my radio buttons lined up like they do in their codepen. Also it wouldnt be
bad if I could figure out how to line up my other questions like theirs. They
have the text to the left and then the buttons/boxes to the right with a
divide in the middle but I can't figure out how to do this.
So far I've tried vertically aligning them and and display blocking and
inlineblocking them.


Do like this yourinputs will be in one column check below example.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="main">
<h1 id="title">Survey Form</h1>
<p id="description">Favourite Wu-Tang Things</p>
<div class="leftsidequestions">
<form id="survey-form">
<label id="name-label" for="name">Name:</label>
<input type="name" id="name" required placeholder="Name"><br>
<br>
<label id="email-label" for="email">Email:</label>
<input type="email" id="email" required placeholder="Email"><br>
<br>
<label id="number-label" for="age">  Age: </label>
<input type="number" id="number" min="1" max="100" placeholder="Age"><br><br>
Favourite Wu-Tang Album:
<select id="dropdown">
<option value="1">Enter the Wu-Tang (36 Chambers)</option>
<option value="2">Wu-Tang Forever</option>
<option value="3">The W</option>
<option value="4">Iron Flag</option>
<option value="5">8 Diagrams</option>
<option value="6">A Better Tomorrow</option>
<option value="7">Once Upon a Time in Shaolin</option>
</select><br><br>
Favourite Member<br>
<div class="inputs"><input type="radio" name="member" value"rza">Rza
<br><input type="radio" name="member" value"gza">Gza
<br><input type="radio" name="member" value"odb">Ol Dirty Bastard
<br><input type="radio" name="member" value"Methodman">Method-Man<br>
<input type="radio" name="member" value"Raekwon">Raekwon
<br><input type="radio" name="member" value"U-God">U-God
<br><input type="radio" name="member" value"Masta">Masta Killa
<br><input type="radio" name="member" value"Ghostface">Ghostface Killah
</div>
</div>
</form>
</div>
first add one div with class name "inputs" and wrap your inputs inside this. and add this css class
body
#title {
text-align:center;
}
#description {
text-align:center
}
#survey-form {
text-align:center;
}
.leftsidequestions {
display:inline-block
margin:auto;
text-align:right;
}
#number {
width:9%;
}
.inputs {
display: flex;
flex-direction: column;
width: 200px;
margin: auto;
}
and see it then in your code.


Following their example, for every line they wrapped content on the left and right each in div elements that they set to inline-block. Like this:
.left,
.right {
display: inline-block;
width: 45%;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
input {
margin: 5px;
}
<div class="left">
<label id="name-label" for="name">Name:</label>
</div>
<div class="right">
<input type="name" id="name" required placeholder="Name" />
</div>
<div class="left">
<label id="email-label" for="email">Email:</label>
</div>
<div class="right">
<input type="email" id="email" required placeholder="Email" />
</div>

Related

Show or Display Text of the Selected Radio Button in Email and Hide Others

Trying to figure how to make the code shown in the email the options of the selected radio button. I have 5 radio button and if I select on the radio it shows their option but when I go to submit the request it send all the data from all other options
Also trying to make the the code work in the PHP format
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
html, body {
min-height: 100%;
}
body, div, form, input, select, textarea, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
position: absolute;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h5 {
margin: 10px 0;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 50%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
}
.banner {
position: relative;
height: 210px;
background-image: url("//pww-wwdweb01/c$/inetpub/wwwroot/Krishneel/OnBoarding/Walgreen.jpg");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
input, select, textarea {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 7px 0;
background: transparent;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
}
.item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder, a {
color: #095484;
}
.item input:hover, .item select:hover, .item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #095484;
color: #095484;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.showhide {
display:none;
}
.item i, input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #a9a9a9;
}
.item i {
right: 2%;
top: 30px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label.radio, label.check {
position: relative;
display: inline-block;
margin: 5px 20px 15px 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
span.required {
margin-left: 0;
color: red;
}
.checkbox-item label {
margin: 5px 20px 10px 0;
}
label.radio:before, label.check:before {
content: "";
position: absolute;
left: 0;
}
label.radio:before {
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #095484;
}
label.check:before {
top: 2px;
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #095484;
}
input[type=checkbox]:checked + .check:before {
background: #095484;
}
label.radio:after {
left: 5px;
border: 3px solid #095484;
}
label.check:after {
left: 4px;
border: 3px solid #fff;
}
label.radio:after, label.check:after {
content: "";
position: absolute;
top: 6px;
width: 8px;
height: 4px;
background: transparent;
border-top: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked + label:after, input[type=checkbox]:checked + label:after {
opacity: 1;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 200px;
padding: 10px;
border: none;
border-radius: 5px;
background: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #0666a3;
}
#media (min-width: 568px) {
.city-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.city-item input {
width: calc(50% - 20px);
}
.city-item select {
width: calc(50% - 8px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testbox">
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
<div class="banner">
<h1>Employment Form</h1>
</div><br>
<p>Please fill out with the information that is requested below and submit the employment verification form. Thank you!</p>
<br>
<div class="question">
<fieldset>
<legend>Employee Status</legend>
<p>Choose Employee Status:<span class="required">*</span></p>
<div class="question-answer">
<input type="radio" value="none" id="radio_1" name="investigator" data-section="#div-1" />
<label for="radio_1" class="radio"><span>New Hire</span></label>
<br>
<input type="radio" value="none" id="radio_2" name="investigator" data-section="#div-2" />
<label for="radio_2" class="radio"><span>Upgrade Credentials to DCS</span></label>
<br>
<input type="radio" value="none" id="radio_3" name="investigator" data-section="#div-3">
<label for="radio_3" class="radio"><span>Return to Work</span></label>
<br>
<input type="radio" value="none" id="radio_4" name="investigator" data-section="#div-4" >
<label for="radio_4" class="radio"><span>Terminate Access DCS or Above</span></label>
<br>
<input type="radio" value="none" id="radio_5" name="investigator" data-section="#div-5" >
<label for="radio_5" class="radio"><span>Terminate Access TM AS400</span></label>
</div>
</fieldset>
</div>
<br>
<!---New Hire Option -->
<div class="showhide" id="div-1">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<p>User On-Boarding Notification Info:</p>
<textarea rows="4"></textarea>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</div>
<!---Upgrade Creditials Option -->
<div class="showhide" id="div-2">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Return to Work Option -->
<div class="showhide" id="div-3">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate DCS or I/O Option -->
<div class="showhide" id="div-4">
<fieldset>
<legend>Employee Information</legend>
<label for="text_3" class="text">Enter I/O or DCS Full Name:</label>
<input type="text" value="" id="text_3" placeholder="Enter I/O or DCS Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate TM Option -->
<div class="showhide" id="div-5">
<fieldset>
<legend>Employee Information</legend>
<label for="text_4" class="text">Enter TM Full Name:</label>
<input type="text" value="" id="text_4" placeholder="Enter TM Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<fieldset>
<legend>DCS Approved</legend>
<label for="text_7" class="text">Enter DCS Email Address:</label>
<input type="text" value="" id="text_7" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<br>
<div class="btn-block">
<button type="submit" href="/">Submit Your Request</button>
</div>
</form>
</div>

One way is to actually remove the elements that are hidden from the DOM before you submit:
$("form").submit(function(e) {
$(this).children(':hidden').remove();
});
$(function() {
$("form").submit(function(e) {
$(this).children(':hidden').remove();
});
// listen for changes
$('input[type="radio"]').on('change', function() {
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$($target.attr('data-section')).show();
// trigger the change on page load
}).trigger('change');
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
select,
textarea,
p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
position: absolute;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h5 {
margin: 10px 0;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 50%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
}
.banner {
position: relative;
height: 210px;
background-image: url("//pww-wwdweb01/c$/inetpub/wwwroot/Krishneel/OnBoarding/Walgreen.jpg");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
input,
select,
textarea {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 7px 0;
background: transparent;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
}
.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder,
a {
color: #095484;
}
.item input:hover,
.item select:hover,
.item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #095484;
color: #095484;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.showhide {
display: none;
}
.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #a9a9a9;
}
.item i {
right: 2%;
top: 30px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
input[type=radio],
input[type=checkbox] {
display: none;
}
label.radio,
label.check {
position: relative;
display: inline-block;
margin: 5px 20px 15px 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
span.required {
margin-left: 0;
color: red;
}
.checkbox-item label {
margin: 5px 20px 10px 0;
}
label.radio:before,
label.check:before {
content: "";
position: absolute;
left: 0;
}
label.radio:before {
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #095484;
}
label.check:before {
top: 2px;
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #095484;
}
input[type=checkbox]:checked+.check:before {
background: #095484;
}
label.radio:after {
left: 5px;
border: 3px solid #095484;
}
label.check:after {
left: 4px;
border: 3px solid #fff;
}
label.radio:after,
label.check:after {
content: "";
position: absolute;
top: 6px;
width: 8px;
height: 4px;
background: transparent;
border-top: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked+label:after,
input[type=checkbox]:checked+label:after {
opacity: 1;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 200px;
padding: 10px;
border: none;
border-radius: 5px;
background: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #0666a3;
}
#media (min-width: 568px) {
.city-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.city-item input {
width: calc(50% - 20px);
}
.city-item select {
width: calc(50% - 8px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testbox">
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
<div class="banner">
<h1>Employment Form</h1>
</div><br>
<p>Please fill out with the information that is requested below and submit the employment verification form. Thank you!</p>
<br>
<div class="question">
<fieldset>
<legend>Employee Status</legend>
<p>Choose Employee Status:<span class="required">*</span></p>
<div class="question-answer">
<input type="radio" value="none" id="radio_1" name="investigator" data-section="#div-1" />
<label for="radio_1" class="radio"><span>New Hire</span></label>
<br>
<input type="radio" value="none" id="radio_2" name="investigator" data-section="#div-2" />
<label for="radio_2" class="radio"><span>Upgrade Credentials to DCS</span></label>
<br>
<input type="radio" value="none" id="radio_3" name="investigator" data-section="#div-3">
<label for="radio_3" class="radio"><span>Return to Work</span></label>
<br>
<input type="radio" value="none" id="radio_4" name="investigator" data-section="#div-4">
<label for="radio_4" class="radio"><span>Terminate Access DCS or Above</span></label>
<br>
<input type="radio" value="none" id="radio_5" name="investigator" data-section="#div-5">
<label for="radio_5" class="radio"><span>Terminate Access TM AS400</span></label>
</div>
</fieldset>
</div>
<br>
<!---New Hire Option -->
<div class="showhide" id="div-1">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<p>User On-Boarding Notification Info:</p>
<textarea rows="4"></textarea>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</div>
<!---Upgrade Creditials Option -->
<div class="showhide" id="div-2">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Date</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Return to Work Option -->
<div class="showhide" id="div-3">
<fieldset>
<legend>Employee Information</legend>
<label for="text_1" class="text">Enter Employee Full Name:</label>
<input type="text" value="" id="text_1" placeholder="Enter First & Last Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<div class="question">
<fieldset>
<legend>Additional Access/Accessories</legend>
<p>Select All That Apply:</p>
<div class="question-answer checkbox-item">
<div>
<input type="checkbox" value="none" id="check_1" name="checklist">
<label for="check_1" class="check"><span>Full DCS Access : DC NET, Email Lists, K Drive, AS400, Shared, etcDrive,</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_2" name="checklist">
<label for="check_2" class="check"><span>Laptop</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_3" name="checklist">
<label for="check_3" class="check"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_4" name="checklist">
<label for="check_4" class="check"><span>Office Space</span></label>
</div>
<div>
<input type="checkbox" value="none" id="check_5" name="checklist">
<label for="check_5" class="check"><span>Computer Setup/Verify in Location</span></label>
</div>
</div>
</fieldset>
</div>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate DCS or I/O Option -->
<div class="showhide" id="div-4">
<fieldset>
<legend>Employee Information</legend>
<label for="text_3" class="text">Enter I/O or DCS Full Name:</label>
<input type="text" value="" id="text_3" placeholder="Enter I/O or DCS Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<p>Department</p>
<select>
<option selected value="" disabled selected>Department</option>
<option value="1">HR</option>
<option value="2">AP</option>
<option value="3">SC-AM</option>
<option value="4">SC-PM</option>
<option value="5">FC-AM</option>
<option value="6">FC-PM</option>
<option value="7">INB-AM</option>
<option value="8">INB-PM</option>
<option value="9">IO</option>
<option value="10">Maintenace</option>
<option value="11">Shipping-AM</option>
<option value="12">sHIPPING-PM</option>
<option value="13">Computer Room</option>
</select>
<br>
<fieldset>
<legend>I/O or Manager Approved</legend>
<label for="text_6" class="text">Enter I/O or Manager Email Address:</label>
<input type="text" value="" id="text_6" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<!---Terminate TM Option -->
<div class="showhide" id="div-5">
<fieldset>
<legend>Employee Information</legend>
<label for="text_4" class="text">Enter TM Full Name:</label>
<input type="text" value="" id="text_4" placeholder="Enter TM Full Name" name="name">
<br>
<label for="text_2" class="text">One ID & Employee ID:</label>
<input type="text" value="" id="text_2" placeholder="Enter One ID & Employee ID" name="name">
<br>
<p>Termination Date:</p>
<input type="datetime-local" name="bdate">
<br>
<fieldset>
<legend>DCS Approved</legend>
<label for="text_7" class="text">Enter DCS Email Address:</label>
<input type="text" value="" id="text_7" placeholder="Enter Email Address" name="name">
</fieldset>
<br>
<fieldset>
<legend>Additional Comments</legend>
<label for="text_6" class="text">Please briefly describe your concern:</label>
<input type="text" value="" id="text_6" placeholder="Enter Additional Comments Here" name="name">
</fieldset>
</fieldset>
</div>
<br>
<div class="btn-block">
<button type="submit" href="/">Submit Your Request</button>
</div>
</form>
</div>

Hiding billing section when "same as shipping address" checkbox is clicked?

How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>

I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>

1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'

Create a new <td> if it exceeds a certain width?

In my MVC site, I have a these lines of code:
<h2>#Model.Question</h2>
#using (Html.BeginForm("Index", "Result", FormMethod.Post))
{
<table cellspacing="10">
<tr>
#foreach (string answer in Model.Answers)
{
<td><input type="radio" name="answer" value="#answer" /><span>#answer</span></td>
}
</tr>
</table>
<div id="footer">
<input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
<input class="btn btn-success" type="submit" />
</div>
}
(Ignore the currently poorly implement first button in the footer)
The <input type="radio... returns the same amount of radio buttons as answers from a database. My problem is that for one question, there are a lot of answers and it starts making the page scroll sideways, as shown in the image below
What I want to happen is for the radio buttons to start on a new line, possibly in another <td>, when it starts to go too far sideways. Possibly done when it hits the border of a surrounding div I could create? Or when it exceeds a certain pixel width? I am not quite sure how to approach this at all. Thanks in advance!

Instead of using tables for your job, it is better to use DIV with fixed width (or percentage width) and floating them left so they stick together in one line. When there will be too much elements for one line, they will automatically jump to a new line. This will also work if you will change width of your browser.
CSS part:
.elements {
border: 1px solid red;
}
.elements:before,
.elements:after{
display: table;
content: " ";
}
.elements:after {
clear: both;
}
.element {
float: left;
min-height: 1px;
border: 1px solid blue;
margin: 2px;
}
HTML Part:
<div class="elements">
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
</div>
https://jsfiddle.net/4xvdcw9b/2/

If using table is not necessary you can try this approach:
<ul>
#foreach (string answer in Model.Answers)
{
<li><input type="radio" name="answer" value="#answer" /><span>#answer</span></li>
}
</ul>
with this styles:
ul
{
max-width:300px;
list-style-type: none;
}
li
{
display: inline;
}

JQuery Mobile CSS Text Input

Here is a JSFiddle:
http://jsfiddle.net/5Lz3zd9y/7/
HTML:
<div class="ui-bar ui-bar-a ui-widget-content">dog</div>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="givenLettersMobile" type="text" value="e" disabled>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input type="text" value="sign in">
CSS:
.givenLettersMobile {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
font-weight:bold;
text-decoration:underline;
line-height: 50%;
}
.blankLettersMobile {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
line-height: 50%;
}
In regards to the JSFiddle using JQuery Mobile, I'm trying to figure out how to get all the text input boxes aligned left to right instead of stacked top to bottom while also trying to reduce the width of the text input boxes (without affecting the width of other input boxes like username, password, etc...). Something more like how these text input boxes behave from the desktop version of the website:
Any thoughts on how to accomplish this?

input[type='text'].givenLettersMobile
{
width: 40px !important;
height: 40px !important;
text-align:center !important;
}

Here is what worked for me:
http://jsfiddle.net/5Lz3zd9y/43/
html:
<div class="ui-bar ui-bar-a ui-widget-content">dog</div>
<ul class="letters">
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="e" size="1" disabled>
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
</ul>
<input type="text" value="sign in">
CSS:
.letters li {
display: inline-block;
}

Failed to Produce Result in Html5 and CSS?

Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:
<div id="wrapper" class="wrapperClass">
<fieldset>
<legend class="regLagendClass">Registration Form</legend>
<form id="registrationForm" method="Post" action="https://www.google.com.pk/">
<div class="divClass">
<label for="firstName" class="labelClass">First Name:</label>
<input type="text" name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
</div>
<div class="divClass">
<label for="lastName" class="labelClass">Last Name:</label>
<input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
</div>
<div class="divClass">
<label for="userName" class="labelClass">User Name:</label><br>
<input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
</div>
<div class="divClass">
<label for="password" class="labelClass">Password:</label><br>
<input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
</div>
<div class="divClass">
<label for="cPassword" class="labelClass">Confirm Password:</label><br>
<input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
</div>
<div class="divClass">
<label for="gender" class="labelClass">Choose Gender:</label>
<select name="gender" class="textboxClass">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="divClass">
<label class="labelClass" for="dob">Date of Birth:</label><br>
<input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
</div>
<div class="divClass">
<label for="country" class="labelClass">Country:</label><br>
<input type="text" id="country" class="textboxClass"/><br>
</div>
<div class="divClass">
<input type="submit" value="Sign Up">
</div>
</form>
</fieldset>
</div>
CSS:
.wrapperClass
{
width:650px;
height: 700px;
margin-left: 300px;
margin-right: 300px;
}
.divClass
{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
.labelClass
{
width: 75px;
display: inline;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline;
}
My code should work as this image :

Check this out http://jsfiddle.net/kabeer182010/gd4Xe/.
If you just replace 'display: inline' with 'display: inline-block' and remove all <br> tags this works fine.

display: inline
causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).
So basically change your last 2 CSS classes to:
.labelClass
{
width: 75px;
display: inline-block;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline-block;
}

Give .textboxClass a float right
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;
}
Should do the trick

Categories

Resources