Inline Blocks and Text Wrapping with CSS

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;
     }

Answer 2

Try this:

input { float: left; }
div { margin-left: 40px; }

Tune the margin-left to how much space you want. The float: left on the checkbox basically takes it out of the block layout so it doesn't push down the text.