CODEWITHSUNDEEP
htmlcsssurvey
qws
qws

Reputation: 61

Positioning label and input side by side

What I'm trying to accomplish is to have the p label (red) line up to the left of the checkboxes (yellow). I've looked around a bit and still haven't got found the solution and I had also tried using different properties, but nothing seems to work.

This is what I have so far:

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
}

#checkLabel {
  position: relative;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Upvotes: 0

Views: 1010

Answers (4)

aislamfaisal
aislamfaisal

Reputation: 111

As I understood that you want to float label on left side of those checkboxes. For that you can go for flexbox, because flexbox wrapping items of it in a box model. By default it wrap items in row direction. So what you can do just add property display and value flex, so it will wrap it's content in a row. I am adding those code in a snippet below, you will find label is taking much space, and for that you can define label class(.labelClass) width.

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
  display: flex;
}

#checkLabel {
  width: 30%;
}
#checkLabel p{
  margin:0 5px;
}
#checkbox{
  width: 70%;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Upvotes: 0

yogesh vaidya
yogesh vaidya

Reputation: 117

I guess this is what you were looking for. display:inline-block will make them come side by side but first div has a big p element so specifying width will restrict it from getting whole width. vertical-align : top will push divs to the top. 

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
 
}

#checkLabel {
  position: relative;
  display:inline-block;
  width:50%;
  vertical-align: top;
   
}
#checkbox{
  display:inline-block;
  vertical-align: top;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Upvotes: 0

Neeraj Kamat
Neeraj Kamat

Reputation: 354

recommend using bootstrap for this. install bootstrap 4 in your project and follow the link below. This will guide you achieve your goal.

https://getbootstrap.com/docs/4.0/layout/grid/

use col class as shown in above link with your red tab in left column and yellow tab in right column. That's all.

Easy way out. They have explained everything with diagrams. using bootstrap saves you a lot of time.

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44087

If I understand correctly, you want the <p> to be next to the <inputs. Well, you could just change the <p>'s display to inline rather than block:

#checkLabel p {
    display: inline;
}

This would produce the following output:

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
}

#checkLabel {
  position: relative;
  display: inline;
}
<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Is this what you want?

Upvotes: 0

Related Questions