Spacing issues

John01 · March 10, 2016

Hi

I have HTML and CSS as per below at the end. The result is;

I have three issues;

A. The two check boxes and their labels are way too up with too much space beneath them. How can I get the same space as the selection inputs?

B. The width of the label is wider than the selection inputs. How to make them the same?

C. How to pad the labels text to match the lefts with the text in selection inputs?

Thanks

Regards


     <div id="asbooked1" class="forminput_wrapper1">
        <label name = 'lblasbooked' class='forminput2' >As Booked</label> 
        <input type='checkbox' name='asbooked[]' value='2' id='asbooked1' />                   
     </div>
             
     <div id="username-wrapper1" class="forminput_wrapper1">
        <select id="houroptions" value="" name="fromhour[]" placeholder="From Hour (hh)" class="forminput1" >
          <option>From Hour (hh)</option>
          <option>00</option>

          ...

          <option>23</option>
        </select>

        <select id="minuteoptions" value="" name="fromminutes[]" placeholder="From Minute (mm)" class="forminput1" >
          <option>From Minutes (mm)</option>
          <option>00</option>

          ...

          <option>55</option>
        </select>
      </div>

      <div id="password-wrapper1" class="forminput_wrapper1">
        <select id="houroptions1" value="" name="tohour[]" placeholder="To Hour (hh)" class="forminput1" >
          <option>To Hour (hh)</option>
          <option>00</option>

          ...

          <option>23</option>

        </select>

        <select id="minuteoptions1" value="" name="tominutes[]" placeholder="From Minute (mm)" class="forminput1" >
          <option>To Minutes (mm)</option>
          <option>00</option>

          ...

          <option>55</option>
        </select>
      </div>

      <div id="asbooked1" class="forminput_wrapper1">
        <label name = 'lbldidnotwork' class='forminput2' >Did Not Work</label>         
        <input type='checkbox' name='didnotwork[]' value='2' id='didnotwork1' />
      </div>

.forminput_wrapper1 .forminput1 {
	font-size:13px;
	height:30px;
	border:none;
	border-bottom:1px solid #565656;
	background:none;
	color:#B4B4B4;
	border-radius:0;
	font-family:'Open Sans';
	width: 49%;
	display: inline-block;
	float: left;
    padding-right: 30px;
    text-align: right;
}

.forminput2 {
	font-size:13px;
	height:30px;
	border:none;
	border-bottom:1px solid #565656;
	background:none;
	color:#B4B4B4;
	border-radius:0;
	font-family:'Open Sans';
	width: 49%;
	display: inline-block;
	float: left;
    padding-right: 30px;
    text-align: left;
}

Psycho · March 10, 2016

You have some invalid HTML.

1. Multiple elements have the same ID. (e.g. 'asbooked1')

2. Some elements are using invalid parameters (Labels don't have a name parameter)

3. A lot of unnecessary code

Give this a try

<html>
<head>
    <style>
 
.forminput_wrapper {
width: 49%;
min-width: 300px;
height:30px;
    white-space: nowrap;
border-bottom:1px solid #565656;
border-radius:0;
font-family:'Open Sans';
font-size:13px;
color:#B4B4B4;
line-height: 30px;
}
 
input {
    padding: 0px;
}
 
.forminput_wrapper select {
border:none;
font-family:'Open Sans';
font-size:13px;
color:#B4B4B4;
width: 49%;
}
 
.checkboxLine label {
padding-left: 5px;
}
 
.checkboxLine input[type="checkbox"] {
margin-top: 10px;
    float: right;
margin-right: 49%;
}
 
</style>
 
</head>
<body>
 
     <div id="asbooked1_" class="forminput_wrapper checkboxLine">
        <label for="asbooked1">As Booked</label> 
        <input type='checkbox' name='asbooked[]' value='2' id='asbooked1' />                   
     </div>
             
     <div id="username-wrapper1" class="forminput_wrapper">
        <select id="houroptions" value="" name="fromhour[]" placeholder="From Hour (hh)" >
          <option>From Hour (hh)</option>
          <option>00</option>
 
          ...
 
          <option>23</option>
        </select>
 
        <select id="minuteoptions" value="" name="fromminutes[]" placeholder="From Minute (mm)" >
          <option>From Minutes (mm)</option>
          <option>00</option>
 
          ...
 
          <option>55</option>
        </select>
      </div>
 
      <div id="password-wrapper1" class="forminput_wrapper">
        <select id="houroptions1" value="" name="tohour[]" placeholder="To Hour (hh)" >
          <option>To Hour (hh)</option>
          <option>00</option>
 
          ...
 
          <option>23</option>
 
        </select>
 
        <select id="minuteoptions1" value="" name="tominutes[]" placeholder="From Minute (mm)" >
          <option>To Minutes (mm)</option>
          <option>00</option>
 
          ...
 
          <option>55</option>
        </select>
      </div>
 
      <div id="asbooked1" class="forminput_wrapper checkboxLine">
        <label for="didnotwork1">Did Not Work</label>         
        <input type='checkbox' name='didnotwork[]' value='2' id='didnotwork1' />
      </div>  
 
</body>
</html>

Sign In

Spacing issues

Recommended Posts

John01

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information