Putting form checkboxes into 2 rows

I have a simple CSS/HTML form with 10 checkboxes in one fieldset. I want to arrange them in two rows of 5 each but can’t figure out how to style them.
Any help appreciated!

CSS:fieldset {
border: 0 none;
margin-bottom:1em;
line-height:1em;
padding:.5em;
background: transparent;
}
fieldset legend {
color: #826d65;
font-weight:bold;
padding:.5em 0 0 0em;
line-height: 2em;
}
fieldset p {
margin:.25em 0;
min-height:1.5em;
padding-bottom: .25em;

}
fieldset p label {
display:block;
width:15em;
min-width:15em;
float:left;
}

HTM: <fieldset>

		&lt;legend&gt;Do you  have a problem with any &lt;br /&gt;
			of the  pests listed below?  Please tick checkbox.&lt;/legend&gt;
			
		&lt;p&gt;&lt;label for="Rodents"&gt;&lt;input  type="checkbox"  name="Rodents" value="Rodents" /&gt;  Rodents&lt;/label&gt;&lt;/p&gt;

and so on for 10 checkboxes.

fieldset {width:30em;}
fieldset p {float:left;}

Thanks dogFang - but how do I get them into 2 side by side sets?

If you make each p’s width to be just under half of the fieldset width, they’ll be able to stack alongside each other… but you won’t get three in a row because the fieldset’s not wide enough, so the floats will drop.

Though there are other ways to get this, so let us know if there’s a snag somewhere.

Also, if you wanted, you could remove the p’s entirely (since you do have a fieldset wrapping everything) and float the labels directly.

Thanks Stomme poes - it looks lovely. Initially nothing happened when I made the changes to the p’s width so then I discarded the p’s and got 2 horizontal rows. Not exactly what I was after but I thought it would do. Then I thought the rows were too close together so I added a line-height on the label and that did the trick. It all popped into 2 columns - perfect!

Thank you so much!

Careful:
if nothing happened at first, you made them too wide (maybe there were side margins too?) so the second ones couldn’t ride up.

When you removed the widths, you got widthless floats, which in most browsers will shrink-wrap to the width of their content.

However when you have this shrink-wrapping, you cannot guarantee cross-browser where (if any) text wrapping occurs.

Some browser somewhere may be wrapping between labels if they are multi-word, or wrapping the text part of the label under the checkbox.
Also IE6 sometimes makes widthless floats 100% wide for whatever reason.

In any case, always check in all browsers when floating a bunch of stuff.

This is why a width is safer on floats… so, give them an ugly background colour so you can see them, make sure there aren’t any side margins you aren’t away of, and set a width… and keep reducing that width until they are small enough to fit side-by-side.

Other solutions not involving floats could be inline-block or even some convolution of display: table. Floats should be ok here, though, so long as you don’t have someone who still wraps and then causes a float snag (won’t happen if your labels are all one or two words).

Hi Stomme poes

I always have widths on floats as is the case with the form CSS. So far have checked Fx, IE and Opera. All good so far.