Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

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.
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image
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
Avatar of APD Toronto
APD Toronto
Flag of Canada image

ASKER

The client just wanted the checkbox before the label.
Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image
Possibly place the input and label into separate divs within the divRight_addedit_location-details and give them specific attributes.
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image
The client just wanted the checkbox before the label.
Try it the other way around for a test.
Avatar of APD Toronto
APD Toronto
Flag of Canada image

ASKER

I just logged out for the night, but I belive  the other way is the same issue.
Avatar of APD Toronto
APD Toronto
Flag of Canada image

ASKER

Rg, can you give me an example?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image
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
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial