How do I align checkboxes horizontally?

[xerox02]

How do I align checkboxes horizontally?

 

Also, if the amount of checkboxes I have exceeds the width or height of a div, how can I set it up so that it will go to the next column or next row.

[haku]

float them all left. They will automatically wrap.

[xerox02]

float them all left. They will automatically wrap.

 

That doesn't seem to work :

<div id="cat">
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>

</div>
​

 

#cat
{  
float: left;
width:100 px;
height:50 px;   
}​

[haku]

You have two problems here:

1) You aren't floating the checkboxes left. You are floating the container they reside within left.

2) Even if you float the checkboxes left, the text you have with them will be not go with them.

 

HTML:

<div class="form-checkbox"><input type="checkbox" name="option3" value="Cheese"> Cheese</div>
<div class="form-checkbox"><input type="checkbox" name="option3" value="Cheese"> Cheese</div>
<div class="form-checkbox"><input type="checkbox" name="option3" value="Cheese"> Cheese</div>

CSS:

.form-checkbox
{
  float:left;
}

[xerox02]

You have two problems here:

1) You aren't floating the checkboxes left. You are floating the container they reside within left.

2) Even if you float the checkboxes left, the text you have with them will be not go with them.

 

HTML:

<div class="form-checkbox"><input type="checkbox" name="option3" value="Cheese"> Cheese</div>
<div class="form-checkbox"><input type="checkbox" name="option3" value="Cheese"> Cheese</div>
<div class="form-checkbox"><input type="checkbox" name="option3" value="Cheese"> Cheese</div>

CSS:

.form-checkbox
{
  float:left;
}

 

Thank you!