CODEWITHSUNDEEP
htmlcss
Tim Aych
Tim Aych

Reputation: 1365

Aligning text next to a checkbox

Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.

All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.

Here's my JSFiddle

Code (using PureCSS for styling):

<form class="pure-form pure-form-aligned">
                    <fieldset>
                        <div class="pure-control-group">
                            <label for="name">Product Name</label>
                            <input id="name" type="text" placeholder="Username">
                        </div>

                        <div class="pure-control-group">
                            <label for="password">Contact Name</label>
                            <input id="password" type="text" placeholder="Password">
                        </div>

                        <div class="pure-control-group">
                            <label for="email">Contact Email</label>
                            <input id="email" type="email" placeholder="Email Address">
                        </div>

                        <div class="pure-control-group">
                            <label for="foo">Website</label>
                            <input id="foo" type="text" placeholder="Enter something here...">
                        </div>

                        <div class="pure-control-group">
                            <label for="foo">Description:</label>
                            <textarea id="description" type="text" placeholder="Enter description here..."></textarea>
                        </div>                      

                        <div class="pure-controls">
                            <label for="cb" class="pure-checkbox">
                                <input id="cb" type="checkbox">
                                I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
                            </label>

                            <button type="submit" class="pure-button pure-button-primary">Submit</button>
                        </div>
                    </fieldset>
                </form>

Any help would be much appreciated. Thanks.

Upvotes: 13

Views: 62309

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101810

This is the method, that I used. It worked better for me than the many other methods I found on SO.

LABEL.indented-checkbox-text
{
  margin-left: 2em;
  display: block;
  position: relative;
  margin-top: -1.4em;  /* make this margin match whatever your line-height is */
  line-height: 1.4em;  /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>

Upvotes: 5

lurker
lurker

Reputation: 58244

Here's a simple way. There are probably others.

<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
     I'm interested in an enhanced listing or premium profile,
     (a member of our team will respond promptly with further information)
</div>

I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.

The fiddle.

Upvotes: 21

apex
apex

Reputation: 271

Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).

<div class="pure-controls">
    <label for="cb" class="pure-checkbox">
    <input id="cb" type="checkbox" style="float: left;">
        <div style="overflow: hidden; padding: 0px 0px 0px 5px;">
             I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
        </div>
</label>
    <button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>

Upvotes: 2

Related Questions