eddiehedgehog
New Member
I'm having issues with some UI that displays two spans, each with a bunch of checkboxes. The HTML looks like:\[code\]<strong>Areas Impacted</strong><div class="arealist"> <span class="group"><label><input type="checkbox" />Select All</label></span> <span class="areas"> <label><input type="checkbox" />Item 1</label> <label><input type="checkbox" />Item 2</label> <label><input type="checkbox" />Item 3</label> <label><input type="checkbox" />Item 4</label> <label><input type="checkbox" />Item 5</label> <label><input type="checkbox" />Item 6</label> <label><input type="checkbox" />Item 7</label> </span></div>\[/code\]And I have the following CSS:\[code\]div.arealist { display: block; clear: both; margin-top: 40px; }div.arealist>span { display: inline; padding: 25px; }div.arealist>span label { display: inline; }div.arealist>span.group { width: 75px; border: 1px solid #d0d0d0; }div.arealist>span.areas { width: 300px; border: 1px solid #d0d0d0; }\[/code\]It looks like so:
There's two issues with this. First, the checkboxes on the right side bleed over into the left box, along with the border as well. The Select All text should be in its own span, and the list of items would all be in the right box. The second issue is the Item 4 checkbox gets broken up into two lines. I want to treat a \[code\]<label>\[/code\] tag as a single unit, never to span across multiple lines.Fiddle SampleWhat am I doing wrong?