Question

When the text is long the checkbox goes above the text. How can I make it stay on the same line as the text but break the text if its long? ie give the text white-space:normal but keep the checkbox and the first bit of the text on the same line.

 <input style="float: left" type="checkbox" ...etc..> <a href="...">my text</a>

Answer 1

I’ve amended the markup to use a label and input, but that’s not necessary (you’ll just need something to contain your checkbox. Take a look at this jsFiddle for an example.

HTML:

<div class="container">
     <label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>

CSS:

.container {
    width: 150px;
    background: red;
}

label {
    display: block;
    padding-left: 1em;
}

input {
    display: inline-block;
    margin-left: -1em;
}

The width on the .container is just there to show that this will work when the text wraps: it will work at any width and for responsive designs without anything fixed. It’ll look like this:

And here’s an example using your original markup (with an added span, I’m assuming you can include that):

<div class="container">
    <span><input type="checkbox"> <a href="#">My text - this label can be as long as you want it to be, see?</a></span>
</div>