Checkbox and Lable Far Apart

Hi Experts,

I have started a big project where I have CSS file for all my forms, but somehow the checkbox is very far from the lable.

For example, my html is
 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>$app_title</title>
        <link rel="stylesheet" href="../styles/forms.css">
        
	
</head>

    <body>

        <!--Content Start-->
       
                                  

        <div id="divRight_addedit_location-details">
            <label for="txtLocCode" id="lblLocCode_addedit_location-details">Location Code:</label>
            <input type="text" id="txtLocCode" name="txtLocCode" maxlength="5" value="<?php echo location['code']; ?>"><br><br>
        
            <div id="divPrint_addedit_location-details">
                <input type="checkbox" name="chkPrint" id="chkPrint_addedit_location-details">
                <label for="chkPrint" id="lblPrint_addedit_location-details">Include in Niagara Location Printout</label>   
            </div>            
        </div>
            
             <!--Content Finish-->
        
    </body>
 
 </html>

Open in new window


and my forms.css is

fieldset {
    margin-top: 20px;
    margin-bottom: 0.5em;
    padding-top: .5em;
    
    margin-left: 400px;
    margin-right: 400px;   
}
input {
    width: 18em;
}
input.required {
    border: 2px solid black;
}

select.required{
    border: 2px solid black;
}

label {
    float: left;
    width: 10em;
    text-align: right;
}

label.required {
    font-weight: bold;
}

.addedit{ 
   padding-top: 20px;
   margin:20px 320px;
   padding-left: 200px;
  
}
.addedit input{
    width:11em; 
    padding:2px;
}
.list{
   padding-top: 20px;
   margin:20px 100px;
   padding-left: 200px;
   padding-bottom: 20px;
   
}
.list input{
    width: 8em;
}



.navigation{
    margin-top: 20px;
    margin-left:225px;
    line-height: 30px;
}
.navigation img{
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

#divNavFirstFiller{
    display: inline;
    width: 1px;
    margin-left: 59px;
}

.navigation p{
    display:inline;
    font-size: 130%;
    line-height: 30px; 
}


#chkArchived  {
  float: left;
  width: 5em;
  text-align: right; 
}


.frmUserDetails {
    border: none;
}

.frmPayeeDetails{
    border: none;
}

.frmDriverDetails{
    border: none;
}

/*CSS for addedit_vehicle-details form START*/

#frmVehDetails{
    margin-top: 30px;
    margin-left: 255px;
}

#addedit_vehicle-details-left{
    float: left;
    display: inline;
    width: 15em;
    margin-right: 35px;
}
#addedit_vehicle-details_lblName{
    margin-left: 30px;
}
#addedit_vehicle-details-middle{
    float: left;
    display: inline;
    width: 15em;
    margin-right: 35px;
}
#addedit_vehicle-details_txtCap{
    width: 3em;
    margin-left: 100px;
}
#addedit_vehicle-details-right{
    float: left;
    display: inline;
    width: 15em;
    margin-right: 35px;
}
.addedit_vehicle-details_dropdown{
    width: 15em;
}
#addedit_vehicle-details_lblType{
    text-align: center;
}
#addedit_vehicle-details-bottom{
    clear: both;
    margin-top: 40px;
    margin-bottom: 2px;
}

#addedit_vehicle-details-lblComment{
    text-align: left;
}

#addedit_vehicle-details-bottom_textArea{
    display: inline;
}
textarea{
    width: 760px;
    height: 150px;
    padding: 4px;
    
}

/*CSS for addedit_vehicle-details form END*/

/*CSS for addedit_locGroup-details for START*/
#div_addedit_locGroup-details_GroupName{
    width: 500px;
    height: 110px;
    float: left;
    display: inline;
}
#lbl_addedit_locGroup-details_GroupName{
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 0px;
    text-align: left;
    width:7em; 
}

#addedit_locGroup-details_txtGroupName{
    width: 15em;
}
#lbl_addedit_locGroup-details_Archived{
    width: 4em;
    margin-left: 180px;
   }
   
#addedit_locGroup-details-bottom{
   clear: both;
   margin-top: 80px;
   width: 8em;
  }
#addedit_locGroup-details-lblComment{
    width: 7em;
    margin-left: 245px;
}
#addedit_locGroup-details-bottom_textArea{
    margin-left: 265px;
    margin-top: 2px;
}

/*CSS for addedit_locGroup-details for END*/

/*CSS for addedit association START*/
#assoc-container{  
    border: 2px solid green;
    margin-top:20px;
    margin-left: 550px;
    width: 660px;
    height: 110px;
}

.assoc_listboxes{
   float: left;
   padding: 2px;
   display: inline;
   width: 270px;

}  

#assoc_btn_container{
   float: left;
   display: inline;
   width: 100px; 
   margin-top: 3px;
   margin-left: 10px;
   margin-right: 10px;
} 

.hidden{
    clear: both;
    display: block;    
    margin-bottom: 20px;
    border: 2px solid blue;
    display: none;
}

/*CSS for addedit association END*/

/*CSS for addedit_location-list START*/

#lbl_SortBy_dropdown{
    margin-top:2px;
    margin-right: 35px;
    width: 13em;
    margin-right: 40px;
    
}
.SortBy_dropdown{
   
    height: 28px;
    width: 15em;
}

/*CSS for addedit_location-list EDN*/

/*CSS for addedit_location-details START*/

#div_addedit_location-details_LocLeft{  
  float: left;   
  width: 490px;
  border: 2px solid red;
}
#lblLocation_addedit_location-details{
    margin-right: 10px;
    width: 12em;
}

#lbl_addedit_location-details-Address{
    margin-right: 10px;
    width: 12em; 
}
#txtAddress_addedit_location-details{
    width: 235px;
    height: 50px;
   
}
#lblPhone_addedit_location-details{
    margin-right: 10px;
    width: 12em;
  
}
#divArchived_addedit_location-details{
    margin-top: 20px;
    height: 20px;
    width: 300px;
}

#lbl_addedit_location-details_Archived{
    width: 12em; 
}
.addedit_location-details_chkArchived{
    margin-left: 2px;   
}

#lblTime_addedit_location-details{
   margin-right: 10px;
   width: 12em;
}

#lblVehicle_addedit_location-details{
    width: 12em;
    margin-right: 10px;
}
#cboVehicle_addedit_location-details{
    width: 240px;
}
#lblLocType_addedit_location-details{
    margin-top: 20px;
    width: 12em;
    margin-right: 10px;
}
#cboLocType_addedit_location-details{
    margin-top: 20px;
    width: 240px;
}

#divRight_addedit_location-details{
    border: 2px solid green;
    margin-top:60px;
    margin-left: 550px;
    width: 660px;
    height: 110px;
}
#lblLocCode_addedit_location-details{
    margin-right: 10px;
    
}
#divPrint_addedit_location-details{
    margin-top: 20px;
    height: 40px;
    width: 600px;
    border: 2px solid blue;
}
#chkPrint_addedit_location-details{
    float: left;
    margin-left: 0px;
  }
#lblPrint_addedit_location-details{
    width: 16em;
    float: left;
    border: 2px solid pink;
}
#divBottom_addedit_location-details{
   clear: both; 
   padding-top: 20px;
   /*border: 2px solid blue;*/
  }
#lblComment_addedit_location-details{
    margin-top: 20px;
    width: 7em;
    margin-left: 245px;
}
#divComments_addedit_location-details{
    margin-top: 20px;
    margin-left: 265px;
    margin-top: 2px;
}

/*CSS for addedit_location-details END*/

Open in new window


The CSS for this html starts at line 250 until the end of file, and when I delete line 1 to 249 it works.

Any help and advice will be greatly appreciated.
APD TorontoSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Why are you not putting the label for "chkPrint" before it instead of after it?  I have never seen it used that way.  http://www.w3schools.com/tags/tag_label.asp
0
APD TorontoSoftware DeveloperAuthor Commented:
The client just wanted the checkbox before the label.
0
rgranlundCommented:
Possibly place the input and label into separate divs within the divRight_addedit_location-details and give them specific attributes.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dave BaldwinFixer of ProblemsCommented:
The client just wanted the checkbox before the label.
Try it the other way around for a test.
0
APD TorontoSoftware DeveloperAuthor Commented:
I just logged out for the night, but I belive  the other way is the same issue.
0
APD TorontoSoftware DeveloperAuthor Commented:
Rg, can you give me an example?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
or change

input {
    width: 18em;
}

Open in new window


to
input {
    width: 1em;
}

Open in new window


http://jsbin.com/pujila/1/edit?html,css,output
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Better yet, don't have a width for your input tag globally.  Instead, create a margin or padding to the one side only for a specific class.  

input.checkbox_1 :padding-right:1em;  for <input type="checkbox" class="checkbox_1" name="something">
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.