Question

I want to display a checkbox, followed by some text that wraps around below itself. The HTML without any CSS looks as follows:

<input type="checkbox" checked="checked" />
<div>Long text description here</div>

I want it to display similar to:

X   Long Text
    Description
    Here

It currently wraps around like this

X   Long Text
Description Here

This is easy to do with tables, but I need it to be in CSS for other reasons. I thought a combination of display: inline-block / float: right / clear / spans instead of DIVs would work, but I’ve had no luck so far.

Answer 1

Wrap the checkbox and label in a container div (or li – i do forms with lists often) and apply

<div class="checkbox">
  <input type="checkbox" id="agree" />
  <label for="agree">I agree with checkbox</label>
</div>




.checkbox input {
      float:left; 
      display:block;
      margin:3px 3px 0 0;
      padding:0;
      width:13px;
      height:13px;
     }

.checkbox label {
      float:left;
      display:block;
      width:auto;
     }