views:

215

answers:

2

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.

+1  A: 

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;}
easwee
The HTML was part of a list of similar items, so this approach worked well. I added a clear: left; for each list item or the items started to stagger, but I didn't use display:block
geographika
+1  A: 

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.

cletus
Thanks for the succinct description of what floats actually do. This approach works too.
geographika