Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniele Manca
Daniele Manca
10,986 Points

Keep label next to checkbox with same indentation when text breaks onto two or more lines.

Hi,

I have the following mark up

<div class="modal-checkbox-block">
    <input type="checkbox" id="byb_10640" name="byb[10640]" value="10640">
    <label for="byb_10640" class="checkbox-label">
        10640 - Marine Transport Lines, Inc.
    </label>
    <span>Active</span>
</div>

How could I keep the label next to the checkbox with the same amount of indentation regardless of how many lines it breaks onto?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Daniele,

Where's the span supposed to be in relation to the other elements?

Daniele Manca
Daniele Manca
10,986 Points

Jason Anello

The span is currently position absolute because it needs to show to the right of the modal-checkbox-block div...

2 Answers

Savannah Lynn
Savannah Lynn
13,662 Points
Savannah Lynn
Savannah Lynn
13,662 Points

Try putting the input inside the label:

<div class="modal-checkbox-block">

    <label for="byb_10640" class="checkbox-label">
        10640 - Marine Transport Lines, Inc.
         <input type="checkbox" id="byb_10640" name="byb[10640]" value="10640">
    </label>
    <span>Active</span>
</div>
Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Here's a couple of ideas that might work out for you. I don't know what existing css you have or what the design calls for so these may or may not be usable.

One way would be to float the checkbox then you could give the label a block display and enough left margin to account for the space the checkbox takes up. About 30px seems to work for me but you can adjust as necessary.

Example css:

input {
  float: left;
}

label {
  margin-left: 30px;
  display: block;
}

If the design would allow you to give the label a width then you could float the label as well and give it a small amount of left margin to space it away from the checkbox.

Example css:

input {
  float: left;
}

label {
  width: 40%;
  display: block;
  float: left;
  margin-left: 10px; 
}

Here's a codepen demo showing both: http://codepen.io/anon/pen/evOabB

You may need to use the clearfix hack if you end up floating both elements and you need to keep the container div from collapsing. Depending on your design it may not matter if it collapses.