My form contains a group of 20 checkboxes and by default they all display on a separate line.
What is the best way to display them horizontally? i.e 4 or 5 on each row?
I don’t want to use a table obviously:)
Are the check boxes being populated by a database, or are they hardcoded in?
The values of the checkboxes are being set from a database but I know in advance the actual checkboxes so these are hard coded as such i.e there is always the same checkboxes every time.
I’ve done a quick look - but it seems that the solutions Google comes up with all have javascript – but you could use a series of nested <div> tags. Float them beside each other.
E.G.
<div id=“container”>
<div style=“float: left”>checkbox #1</div>
<div style=“float: left”>checkbox #2</div>
<div style=“float: left”>checkbox #3</div>
<div style=“float: none”>checkbox #4</div>
</div>
<div id=“container”>
<div style=“float: left”>checkbox #5</div>
<div style=“float: left”>checkbox #6</div>
<div style=“float: left”>checkbox #7</div>
<div style=“float: none”>checkbox #8</div>
</div>
Not my favourite solution (that’s a lot of floating divs) but you use the containers to position them. It worked when I tested it - no problems in IE6 either.
You could of course move the inline CSS to your external sheets (assuming you have them).
Thanks Jeff - I think I will avoid javascript solutions. The div solution looks fairly clean so I think it will have to suffice for now.
Yes I use all external sheets - no inline CSS at the moment.
Many thanks
Paul
No problem Paul. I would avoid Javascript for design as well (unless it’s unavoidable). No sense making it visually appealing only for a few 
<div id=“container”>
<div style=“float: left”>checkbox #1</div>
<div style=“float: left”>checkbox #2</div>
<div style=“float: left”>checkbox #3</div>
<div style=“float: none”>checkbox #4</div>
</div>
<div id=“container”>
<div style=“float: left”>checkbox #5</div>
<div style=“float: left”>checkbox #6</div>
<div style=“float: left”>checkbox #7</div>
<div style=“float: none”>checkbox #8</div>
</div>
I’d
<fieldset>
<legend>blah</legend>
<label for="blah"><checkbox id="blah" name="whatever">Box 1</label>
<label for="blah2"><checkbox id="blah2" name="whatever">Box 2</label>
<label for="blah3"><checkbox id="blah3" name="whatever">Box 3</label>
<label for="blah4"><checkbox id="blah4" name="whatever">Box 4</label>
</fieldset>
<fieldset>
<legend>blah</legend>
<label for="blah5"><checkbox id="blah5" name="whatever">Box 5</label>
<label for="blah6"><checkbox id="blah6" name="whatever">Box 6</label>
<label for="blah7"><checkbox id="blah7" name="whatever">Box 7</label>
<label for="blah8"><checkbox id="blah8" name="whatever">Box 8</label>
</fieldset>
fieldset {
float: left;
width: half the area;
}
fieldset label {
display: inline; (though this should be default)
padding: 0 enough for the sides;
white-space: nowrap; don’t let inputs wrap without bringing label text along
}
assuming you wanted two columns or something. You could use divs instead of fieldsets but without further knowledge, this would be my default as it is grouping questions. You can remove its styling and legends with CSS if they’re ugly.
I’d agree that fieldsets could work - but with 4 or 5 rows of questions (as he needs) you would be nesting divs inside of fieldsets anyway. I’d probably add labels anyway so that when you click the text it will click the checkbox. More user friendly 
Good addition.
I’d agree that fieldsets could work - but with 4 or 5 rows of questions (as he needs) you would be nesting divs inside of fieldsets anyway.
Why?
I mean, he could add divs if he wanted to, but I haven’t seen their need yet (in this instance-- I use divs for keeping label-input pairs as a unit if I can’t do the usual label-wrapping-span-and-input setup, but not with checkradios).
He could limit the number of questions in a row simply be setting a set width on whatever container he chooses (be it inner fieldsets or divs or whatever). Being inline, they’ll be forced to wrap when they run out of room.
He could also use float as you had (with float set on all labels, and a class added to the few labels who need to clear the ones above it, though watch out in IE they won’t clear if they’re floating!), or display: inline-block if block-like attributes are also needed. There are lots of ways this could be done and I assume which way he picks might be really dependent on the rest of the form.
But I’m trying to get away from wrapping stuff in divs (or anything else) in forms. My earlier forms are monsters. My recent ones are much better, because I was able to reduce their weights by taking out elements.
Labels ++ cause we need to know why we’re clicking on them (don’t forget non-visual user agents!)
*edit yeah if those containers in your example were only to force new lines or something:
<fieldset>
<legend>blah</legend>
<label for="blah"><checkbox id="blah" name="whatever">Box 1</label>
<label for="blah2"><checkbox id="blah2" name="whatever">Box 2</label>
<label for="blah3"><checkbox id="blah3" name="whatever">Box 3</label>
<label for="blah4"><checkbox id="blah4" name="whatever">Box 4</label>
<label for="blah5"><checkbox id="blah5" name="whatever">Box 5</label>
<label for="blah6"><checkbox id="blah6" name="whatever">Box 6</label>
<label for="blah7"><checkbox id="blah7" name="whatever">Box 7</label>
<label for="blah8"><checkbox id="blah8" name="whatever">Box 8</label>
</fieldset>
and
fieldset {
width: whatever will fit 4 or 5 checkradio questions in a row;
}
<div id="container">
<div style="float: left">checkbox #1</div>
<div style="float: left">checkbox #2</div>
<div style="float: left">checkbox #3</div>
<div style="float: none">checkbox #4</div>
</div>
<div id="container">
<div style="float: left">checkbox #5</div>
<div style="float: left">checkbox #6</div>
<div style="float: left">checkbox #7</div>
<div style="float: none">checkbox #8</div>
</div>
That’s invalid, you have 2 ID’s which are the same which isn’t valid…
It’s pseudo code, like mine also is (there is no element called checkbox either).
It’s more to show an idea than anything else.
Hi
I’m just making sure the OP knows so if he copies it (and just change “checkbox” to the actual HTML), it won’t be invalid.
Cheers.
I just copied and pasted the code - you would need to change the ids, or use a class.
@Stomme Poes
Ya, you could use the fieldsets - would be better to use them with proper css (to get rid of the fieldset border and title). The only problem might be encorporating it into the rest of a form easily – you’d have to use negative padding for IE and negative margins for the rest? (To make it butt up with the rest of the form without a disjointed seperation).
I’m obviously not a big fan of having that many floating divs around (it’s heavy and can get confusing to read when it’s placed inside the guts of a large web page). Also using the width property in the style attribute for the fieldset is a good idea - then it can be wrapped much easier and changed in the future with less work (change one property and instead of moving divs around). The divs will work as far back as IE6 though (and look the same). The biggest problem you run into, is that if the user’s browser is really small, then it will drop some of the divs to the next line - having the one fieldset will take care of that problem. For the most part, having the fieldset will also allow mobile (cell phone) users to view the form properly too (so that might be a huge advantage, obviously depending on need).
Ya, you could use the fieldsets - would be better to use them with proper css (to get rid of the fieldset border and title). The only problem might be encorporating it into the rest of a form easily – you’d have to use negative padding for IE and negative margins for the rest? (To make it butt up with the rest of the form without a disjointed seperation).
Yeah I actually use fieldsets called “access” for when I have a row of inputs who represent a single piece of data, usually a date or a postal code. I actually want/need a label for each input, but visual users can guess really well what
Birthdate: ____ ____ ____
means.
So I use a hidden fieldset to have a hidden legend (read out by screen readers), a p holding what normally is the label (Birthdate, not read out by screen readers) and then three labels, all pushed aside. They’re read out by screen readers, appear with CSS off, but otherwise are gone.
Why not just keep the legend onscreen? cause I can’t style it to imitate a label in Firefox. That’s just way too awesome for them : )
I also use fieldsets for these:
16. How many oreos do you eat per day?
X None X A few X Lots X I need help
The question again gets repeated in the legend, the question becomes either a p or sometimes a label without a for attribute (problem here is some screen readers if they see two labels, pick only one to read out), then each checkbox has its own label and because they’re in a fieldset with the class of “access” I can style them differently from “normal” labels (who are often floated).
I haven’t actually ever run into the IE adding-margins bug, though I’ve seen it on other people’s pages.
Otherwise, really they’ll stay to the left like anything else would, so you won’t see any indenting.
My problems adding extra nested fieldsets come from Firefox-- getting that legend offscreen is a b****. And no matter what, it still takes up space. You can always see a hair more space on my forms right above any questions using a fieldset, in FF alone.
In any case, I’m still not sure why they weren’t stacking alongside each other in the first place for the OP, as they’re inlines by default, so I wonder what the styles are for the rest of the form-- I’m assuming the inputs are inheriting some blocky style from other inputs??
I’ve had that problem with IE and/or FF - where there’s a slight gap between things. That’s where the negative margins and negative padding comes in – but it’s tricky. Sometimes it’s not a problem though, it just doesn’t look as nice. Other times it can rip the page apart – depends on the project and the requirements.
I don’t know why they can’t just all cooperate and make consistent display for browsers! (Guess then we’d be obsolete - so maybe it’s a good thing)
You can’t have negative padding: it’s just not possible.
Hi all, a CSS and forum newbie here - after following this thread for the past few days I realise there’s no hard and fast rule for “Stacking” content horizontally. Up until now I use tables for form input but think I will try stomme poes’s method for fieldsets. Thanks for the info posted so far. Moving out from styling just the input… You might be cringing as you read this but I normally have one row per input and a cell for a question and one for the answer. How would you go about styling this using css instead? Also, I think I have a good grasp of how to use css as a framework for layout instead of tables after reading r. andrews and d. schafers book - HTML Utopia: Designing without tables using CSS, 2nd edition. But styling things to give horizontal structure still confuses me, as not everything lends itself to an unordered list and I have come across the problem mentioned earlier in this thread about too many floating divs… ANy online guides to help with this? I have been shown Googles blueprint before but think this doesn’t really help you to understand CSS. Thanks
Hmmm… to tell the truth I plunged into forms, never with tables (had never run into tables back then) and then went googling.
I looked at how others did forms, though one problem I ran into all the time was, the examples were simple, with short labels, while my forms were complicated and had long, sometimes wrapping labels.
Here’s one, with short labels, using the label as the wrapping element:
http://gtwebdev.com/workshop/forms/form.php
Mine already used a span for help text, so that method I found too difficult to switch to. So I had divs around each label-input (kinda the same as your table row) and float the label left, let the input ride up alongside, and use the wrapping div to clear the floats inside.
This means the div will need to enclose the floats for which I either use overflow: hidden on the divs, or, when my help text needed to be able to overflow, display: table (since my divs had a width, IE wrapped the floats too despite not understanding display: table).
Opera had serious issues with display: table on very very very long complicated forms. I mean really really long. Since those forms didn’t have help text I switched those back to using the overflow: hidden method.
Rachel wrote a thingie on CSS form styling here, with some tips.
I also ran into Tyssen’s Legends of Style page early on. Read both the original AND the update.
Thanks for the links SP. Wil have a look through…