How could I align my input boxes so that the first one is aligned with the label and the other two is aligned underneath the top input box.
Why is my domain and dropdown menu not aligning?
CSS:
#newwebsiteForm{
padding:10px;
margin:10px 0;
width:480px;
position: relative
}
#newwebsiteForm label{
display:block;
float:left;
clear:both;
margin:0 15px 0 25px;
width:240px;
border:1px solid green;
height:15px
}
#newwebsiteForm input{
display:block;
float:left;
width:240px;
height:15px;
}
#newwebsiteForm .radioButton {
width:15px;
height:15px;
}
#newwebsiteForm .radioText {
display:block;
width:30px;
height:20px;
float:left;
font-size:12px;
border:1px solid red;
}
#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
display:block;
float:left;
margin-left:25px;
background-color:red;
}
#newwebsiteForm textarea{
display:block;
float:left;
}
input#domain,#newwebsiteForm select,
.form-field{float:right;width:200px;margin-top:-15px}
.form-field{width:220px}
HTML:
<div id="newwebsiteSection">
<form action="#" id="newwebsiteForm" method="get">
<fieldset>
<div>
<label>Do You Require Hosting?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
</div>
<div>
<label>Do You Require A Domain?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
</div>
<label>Do You Have A Logo?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label for="domain">What is your Domain?</label>
<input type="url" id="domain" value="http://example.com"/>
<label for="newwebsiteType">Type of site Required?</label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<div>
<label>Three Favorite colors?</label>
<div class="form-field">
<input id="color1" value=""/>
<input id="color2" value=""/>
<input id="color3" value=""/>
</div>
</div>
<div>
<label>What are your favorite websites?</label>
<div class="form-field">
<input type="text" id="fav1" value=""/>
<input type="text" id="fav2" value=""/>
<input type="text" id="fav3" value=""/>
</div>
</div>
<label for="comments">Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request"/>
</fieldset>
</form>
</div>
Despite all the flack they've gotten lately, I feel like this is one of the few examples of where a table is actually not only useful, but the most correct solution.
Related
I have the following multiple radio group with same name
the label next to radio buttons work good with first form1
but in the second from2 the labels works on the radio buttons on the first form1
as this link https://jsfiddle.net/2dp63kw0/
<style>
.custom-radio label {
color:#FFF;
border-radius:20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size:10pt;
font-family:arial;
background-color: #6D778A;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: inline-block;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #114ABB;
}
</style>
<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
<hr>
<form id="form2">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
every labels next to radio buttons work on form which it belongs to
Change the "name" and "for" attributes in the second form with id=form2.
Also, use class instead of id if you want to apply same properties, as id is unique and used for a single element.
Try this:
.custom-radio label {
color:#FFF;
border-radius:20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size:10pt;
font-family:arial;
background-color: #6D778A;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: inline-block;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #114ABB;
}
<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
<hr>
<form id="form2">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="directionb" id="direction2" value="left" />
<label class="btn btn-default" for="direction2">left</label>
<input type="radio" name="directionb" id="direction3" value="top" />
<label class="btn btn-default" for="direction3">right</label>
</div>
</form>
The id values you have used for the input tags are not unique so the first element with the id value is used.
From MDN:
The id global attribute defines an identifier (ID) which must be unique in the whole document.
Change the id values for the input tags in your second form.
.custom-radio label {
color:#FFF;
border-radius:20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size:10pt;
font-family:arial;
background-color: #6D778A;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: inline-block;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #114ABB;
}
<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
<hr>
<form id="form2">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction3" value="left" />
<label class="btn btn-default" for="direction3">left</label>
<input type="radio" name="direction" id="direction4" value="top" />
<label class="btn btn-default" for="direction4">right</label>
</div>
</form>
#content{
display:flex;
justify-content:center;
height:500px;
width:100%;
}
#title {
display:block;
}
#name {
display:block;
}
#email {
display:block;
}
#number {
display:block;
}
<body>
<div id="content">
<div id="title"><p>This is a survey form.</p></div>
<div id="description"><p>It would be nice if you could fill this information about addiction.</p></div>
<form id="survey-form">
<label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your email">
<label id="number-label" for="age">Enter your age:</label>
<input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
<h4>What are you currently addicted to?</h4>
<select id="dropdown" name="items">
<option value="alcohol">Alcohol</option>
<option value="smoking">Smoking</option>
<option value="gaming">Gaming</option>
<option value="other">Other</option>
</select>
<p>For how long you've been addited?</p>
<label><input type="radio" name="1month" id="1month"> >1 Month</label>
<label><input type="radio" name="6months" > >6 Months</label>
<label><input type="radio" name="12months" > >12 Months</label><br>
How many people do you know that are addicted as well?
<input type="checkbox" value="none">None
<input type="checkbox" value="few">Few (1-5)
<input type="checkbox" value="tons">A lot (over 5)
<p>If there's anything else you would like to point out feel free to do it.</p>
<textarea name="feedback" cols="30" rows="10"></textarea>
<input id="submit" type="submit" name="submit" value="Submit your information">
</div>
</form>
</body>
What makes this first and second paragraphs on the page display on the left side?
I've covered everything in div container, but right now as you can see it floats to the left side for some reason.
I would like it to be centered just like the rest of the stuff.
Is using flexbox is a bad option here or something?
#content{
display:grid;
justify-content:center;
height:500px;
width:100%;
}
#title {
display:block;
}
#name {
display:block;
}
#email {
display:block;
}
#number {
display:block;
}
input#submit{
display:block;
}
<body>
<div id="content">
<div id="title"><p>This is a survey form.</p></div>
<div id="description"><p>It would be nice if you could fill this information about addiction.</p></div>
<form id="survey-form">
<label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your email">
<label id="number-label" for="age">Enter your age:</label>
<input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
<h4>What are you currently addicted to?</h4>
<select id="dropdown" name="items">
<option value="alcohol">Alcohol</option>
<option value="smoking">Smoking</option>
<option value="gaming">Gaming</option>
<option value="other">Other</option>
</select>
<p>For how long you've been addited?</p>
<label><input type="radio" name="1month" id="1month"> >1 Month</label>
<label><input type="radio" name="6months" > >6 Months</label>
<label><input type="radio" name="12months" > >12 Months</label><br>
How many people do you know that are addicted as well?
<input type="checkbox" value="none">None
<input type="checkbox" value="few">Few (1-5)
<input type="checkbox" value="tons">A lot (over 5)
<p>If there's anything else you would like to point out feel free to do it.</p>
<textarea name="feedback" cols="30" rows="10"></textarea>
<input id="submit" type="submit" name="submit" value="Submit your information">
</div>
</form>
</body>
I guess this can help you achieve what you are looking for. You can replace your CSS code with the below snippet.
#content{
text-align:center;
height:500px;
width:100%;
}
#title {
display:block;
}
#name {
display:block;
margin:0 auto;
}
#email {
display:block;
margin:0 auto;
}
#number {
display:block;
margin:0 auto;
}
I want the div which I use as border to be vertically centered. But it looks like the div is going upwards
<label> Application </label> <input type="text" style="width:10%; bottom:20px;">
<div style="width:1px; height:20px; background-color:grey;display: inline-block"></div> <label> Iteration </label> <input type="text" style="width:10%">
Use vertical-align: middle; to align vertically.
<label> Application </label> <input type="text" style="width:10%; bottom:20px;"> <div style="width:1px; height:20px; background-color:grey;display: inline-block;vertical-align: middle;"></div> <label> Iteration </label> <input type="text" style="width:10%">
You can use vertical-align: middle.
But better practice to draw the separator line using borders- see sample snippet below.
Check and let me know your feedback on this. Thanks!
.left-border {
border-left: 1px solid grey;
padding-left: 5px;
}
<label>Application</label>
<input type="text" style="width:10%; bottom:20px;">
<label class="left-border">Iteration</label>
<input type="text" style="width:10%">
<label> Application </label> <input type="text" style="width:10%; bottom:20px;"> <div style="width:1px; height:20px; background-color:grey;display: inline-block; vertical-align:bottom;"></div> <label>Iteration</label> <input type="text" style="width:10%">
<label> Application </label> <input type="text" style="width:10%; bottom:20px;">
<div style="width:1px; height:20px; background-color:grey;margin:-5px 0px;display: inline-block"></div>
<label> Iteration </label> <input type="text" style="width:10%">
or
<div style="width:1px; height:20px; background-color:grey;vertical-align:middle;display: inline-block"></div>
Here's the fiddle of my project https://jsfiddle.net/Optiq/65rddhu4/
If you look at the label on the right side that says "Strongest" you'll notice that it sits beneath even the div it's contained within. I initially had the div narrower in width but even as I extend it out it still stays on the bottom.
I know a way to work around it is to use CSS to add a position attribute to force it to where I want it to be, but from my experience with positioning things like that it may look right in one browser but may be 400px away in a different browser. Why is this occurring?
Here's the HMTL
<div class="texfrm_o" style="height:128px;">
<div class="texfrm_i" style="width:99%; height:128px; margin:auto;"><br />
<label class="label_02" style="width:77%; text-align:center; margin:auto;">Generating Ideas</label><br />
<div class="anscont">
<div class="r_cont_lab" style="float:left; margin-left:4px;">
Weakest
</div>
<div class="radcont">
<div class="radbox">
<label for="q7a1" class="rad_lab">1</label>
<input type="radio" class="rad_buttn2" value="1" name="Generating Ideas" id="q7a1">
</div>
<div class="radbox">
<label for="q7a2" class="rad_lab">2</label>
<input type="radio" class="rad_buttn2" value="2" name="Generating Ideas" id="q7a2">
</div>
<div class="radbox">
<label for="q7a3" class="rad_lab">3</label>
<input type="radio" class="rad_buttn2" value="3" name="Generating Ideas" id="q7a3">
</div>
<div class="radbox">
<label for="q7a4" class="rad_lab">4</label>
<input type="radio" class="rad_buttn2" value="4" name="Generating Ideas" id="q7a4">
</div>
<div class="radbox">
<label for="q7a5" class="rad_lab">5</label>
<input type="radio" class="rad_buttn2" value="5" name="Generating Ideas" id="q7a5">
</div>
<div class="radbox">
<label for="q7a6" class="rad_lab">6</label>
<input type="radio" class="rad_buttn2" value="6" name="Generating Ideas" id="q7a6">
</div>
<div class="radbox">
<label for="q7a7" class="rad_lab">7</label>
<input type="radio" class="rad_buttn2" value="7" name="Generating Ideas" id="q7a7">
</div>
<div class="radbox">
<label for="q7a8" class="rad_lab">8</label>
<input type="radio" class="rad_buttn2" value="8" name="Generating Ideas" id="q7a8">
</div>
<div class="radbox">
<label for="q7a9" class="rad_lab">9</label>
<input type="radio" class="rad_buttn2" value="9" name="Generating Ideas" id="q7a9">
</div>
<div class="radbox">
<label for="q7a10" class="rad_lab">10</label>
<input type="radio" class="rad_buttn2" value="10" name="Generating Ideas" id="q7a10">
</div>
</div>
<div class="r_cont_lab" style="float:right; margin-right:4px;">
Strongest
</div>
</div><!--anscont-->
</div><!--texfrm_i-->
</div><!--texfrm_o-->
Here's the CSS elements at work with it
.texfrm_o{
width:77%;
/*background-color:#006;*/
display:block;
margin:auto;
}
.texfrm_i{
border-radius:11px;
display:block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(24%,#cecece), color-stop(67%,#cecece), color-stop(67%,#f2f2f2), color-stop(67%,#cecece), color-stop(100%,#828282)); /* Chrome,Safari4+ */
box-shadow:#383838 0px 11px 5.6px;
}
.label_02{
width:88%;
height:22px;
display:block;
font-family:'Oswald', sans-serif;
font-size:12pt;
background-color:#c9fffb;
color:#489c7f;
box-shadow:#8fd7d2 0px 0px 33px;
border-radius:2.2px;
}
.r_cont_lab{
background-color:#CC9;
width:88px;
height:22px;
font-size:8pt;
text-align:center;
font-family:'Roboto', sans-serif;
font-size:11pt;
}
.radcont{
width:400px;
height:55px;
background-color:#096;
margin:auto;
display:block;
}
.radbox{
width:40px;
height:55px;
float:left;
display:block;
background-color:#CC9;
}
.anscont{
background-color:#390;
width:666px;
height:55px;
margin:auto;
display:block;
}
Is this the result that you were looking for?
https://jsfiddle.net/Optiq/65rddhu4/
http://i.stack.imgur.com/sscyC.png
The change I made was moving your
<div class="r_cont_lab" style="float:right; margin-right:4px;">Strongest</div>
block above the other div, this way it is adding it before just like you want (I hope)
I have changed the following line in your fiddle.
And it WORKED
Check the following fiddle
https://jsfiddle.net/dvwuxvaa/
I changed this 1 line in HTML part for weakest tab
<div class="r_cont_lab" style="float:left; margin-left:4px;margin-right: 42px;">
and changed css display property of the below
.radcont{
width:400px;
height:55px;
background-color:#096;
margin:auto;
display:inline;
}
let me know if it is helpful
Just Remove the height:55px; of '.radcont' class,
Then your code of radcont class became as follows.
.radcont{
width:400px;
background-color:#096;
margin:auto;
display:block;
}
https://jsfiddle.net/65rddhu4/2/
I'm having a problem here. My first two heading doesn't have a problem. But when I insert my 3rd heading the form is screwed. Here is the code. Yes, i'm quite new.
![enter image description here][1]
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<h2>Oral Expression</h2>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
css code
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
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:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
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:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
Remember input elements are inline elements, so the headings will appear after the input element if there is enough space for it to do so. The Oral in the heading Oral Expression is wide enough to fit after the input element and that is why it is behaving that way.
Try changing the width of .assestment-form from 400px to 375px and the heading will appear in the next line.
Live demo....................................................................
Hi now define your #stylized h2 to clear both
as like this
#stylized h2{
clear:both;
}
Live demo
This is happening because there is enough space to hold part of text from the h2 tag
so in your h2 css add
clear:left;
The answer is here: http://jsfiddle.net/2dcPE/5/
Please check. Please keep in mind:
Add float: left; for h1 and h2 in Css
Add to Css
br{
clear: left;
}
Add <br /> in HTML to make new line
UPDATE:
HTML
<html>
<head>
<link rel="stylesheet" href="form.css" type="text/css">
</head>
<body>
<div id="stylized" class="assestment-form">
<form id="form" name="form" method="post" action="assesment-form-handler.php">
<h1>Application Information</h1><br/>
<p> </p>
<label>Name</label>
<input type="text" name="client_name" id="client_name" />
<label>Date of Birth</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Gender</label>
<input type="text" name="client_gender" id="client_gender" />
<label>Address</label>
<textarea name="client_address" rows=5 cols=40 id="client_address"></textarea>
<label>Contact No.</label>
<input type="text" name="client_contact" id="client_contact" />
<label>Email Address</label>
<input type="text" name="client_dob" id="client_dob" />
<label>Marital Status</label>
<input type="text" name="client_status" id="client_status" />
<label>Citizenship</label>
<input type="text" name="client_citizen" id="client_citizen" />
<h1>Formal Training</h1><br/>
<p> </p>
<label>DIPLOMA 1 </label>
<input type="text" name="client_dip1" id="client_dip1" />
<label>Field of Training </label>
<input type="text" name="client_field1" id="client_field1" />
<label>Educational Institution</label>
<input type="text" name="client_edu1" id="client_edu1" />
<label>Began Studies on</label>
<input type="text" name="client_stud1" id="client_stud1" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip1" id="client_obtaindip1" />
<label>DIPLOMA 2 </label>
<input type="text" name="client_dip2" id="client_dip2" />
<label>Field of Training </label>
<input type="text" name="client_field2" id="client_field2" />
<label>Educational Institution</label>
<input type="text" name="client_edu2" id="client_edu2" />
<label>Began Studies on</label>
<input type="text" name="client_stud2" id="client_stud2" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip2" id="client_obtaindip2" />
<label>DIPLOMA 3 </label>
<input type="text" name="client_dip3" id="client_dip3" />
<label>Field of Training </label>
<input type="text" name="client_field3" id="client_field3" />
<label>Educational Institution</label>
<input type="text" name="client_edu3" id="client_edu3" />
<label>Began Studies on</label>
<input type="text" name="client_stud3" id="client_stud3" />
<label>Obtained Diploma on</label>
<input type="text" name="client_obtaindip3" id="client_obtaindip3" />
<h1>Work Experience</h1><br/>
<p> </p>
<label>JOB 1</label>
<input type="text" name="client_job1" id="client_job1" />
<label>Company</label>
<input type="text" name="client_company1" id="client_company1" />
<label>Date of Beginning</label>
<input type="text" name="client_begin1" id="client_begin1" />
<label>Date of End</label>
<input type="text" name="client_end1" id="client_end1" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties1" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob1">
<label>JOB 2</label>
<input type="text" name="client_job2" id="client_job2" />
<label>Company</label>
<input type="text" name="client_company2" id="client_company2" />
<label>Date of Beginning</label>
<input type="text" name="client_begin2" id="client_begin2" />
<label>Date of End</label>
<input type="text" name="client_end2" id="client_end2" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob2">
<label>JOB 3</label>
<input type="text" name="client_job3" id="client_job3" />
<label>Company</label>
<input type="text" name="client_company3" id="client_company3" />
<label>Date of Beginning</label>
<input type="text" name="client_begin3" id="client_begin3" />
<label>Date of End</label>
<input type="text" name="client_end3" id="client_end3" />
<label>Job Duties and Responsibilities</label>
<textarea name="client_jobduties3" rows=5 cols=40 id="client_jobduties3"></textarea>
<label>Resume with job details</label>
<input type="file" name="client_uploadjob3">
<h1>Language Skills</h1><br/>
<p>(Please specify level: beginner, intermediate or advance) </p>
<h2>Reading</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench1" id="client_readfrench1" />
<label>English</label>
<input type="text" name="client_readenglish1" id="client_readenglish1" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest1" id="client_langtest1"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify1" id="client_specify1" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed1" id="client_datepassed1" />
<h2>Writing</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<label>English</label>
<input type="text" name="client_readenglish2" id="client_readenglish2" />
<label>Have you passed the test?</label>
<input type="text" name="client_langtest2" id="client_langtest2"
value="Please put Yes or No"/>
<label>If yes, please specify test</label>
<textarea name="client_specify2" id="client_specify2" rows=5 cols=40></textarea>
<label>Date Passed</label>
<input type="text" name="client_datepassed2" id="client_datepassed2" />
<div>
<h2>Oral Expression</h2><br/>
<label>French</label>
<input type="text" name="client_readfrench2" id="client_readfrench2" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form>
</div>
<body>
</html>
CSS
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.assestment-form{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:20px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#stylized h2 {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
margin-bottom:8px;
float: left;
}
#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:left;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
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:11px;
font-weight:bold;
}
#stylized textarea {
loat:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
br{
clear: left;
}