I changed the way I position checkboxes and their labels in the alpha 4 release of FeedLounge. The previous technique proved to be very inconsistently applied in Firefox - it would look right on one load, then you'd hit refresh and it would be all gollywockit.
Many decisions in form layout and label positioning are largely personal preference. Arguments can be made (and are) for a number of different general layouts. I prefer this:
Lining up the input fields gives a nice clean left edge line and allows the eye to travel the fields easily. Having the labels right aligned connects them to the fields much better than left alignment does.
I generally accomplish this layout for input type=text
s, select
s and textarea
s using the following HTML markup:
<p class="label_field_pair">
<label for="foo">Foo:</label>
<input type="text" id="foo" />
</p>
And the following CSS:
p.label_field_pair {
clear: both;
float: none;
}
p.label_field_pair label {
clear: left;
display: block;
float: left;
text-align: right;
width: 100px;
}
p.label_field_pair input {
clear: right;
float: left;
margin-left: 10px;
width: 200px;
}
The result looks like this
I used to use the same general technique for checkboxes as well:
<p class="label_checkbox_pair">
<input type="checkbox" id="foo" />
<label for="foo">Foo</label>
</p>
And the following CSS:
p.label_checkbox_pair {
clear: both;
float: none;
}
p.label_checkbox_pair input {
clear: left;
float: left;
margin-left: 80px;
}
p.label_checkbox_pair label {
clear: left;
display: block;
float: left;
margin-left: 10px;
width: 200px;
}
This will generally produce a layout like this:
However I found that about 30% of the time, it did this instead:
Refreshing the page would fix it, but it happened with enough regularity on first load that it was simply unacceptable. I decided to use a different technique. Instead of floating both elements, I just padded the label and absolutely positioned the checkbox.
The HTML is the same:
<p class="label_checkbox_pair">
<input type="checkbox" id="foo" />
<label for="foo">Foo</label>
</p>
but the CSS is different:
p.label_checkbox_pair {
clear: both;
float: none;
position: relative;
}
p.label_checkbox_pair input {
left: 80px;
position: absolute;
top: 1px;
}
p.label_checkbox_pair label {
display: block;
margin-left: 90px;
width: 200px;
}
I use margin-left instead of padding-left for the label
because the horizontal padding is inconsistently applied in browsers in relation to width (some include the padding in the width, others do not).
If you want to use this to replace the float technique for standard label/field pairs, the field still needs to be the floated element because the label is the variable height element in that case. Unfortunately this does not work well with textareas unless you set a height on the label because the absolutely positioned textarea will not expand the p
tag down to the full height of the textarea.
This overflow means the textarea
will overlap the field below it.
Anyway, this is how I've done the field layout now in FeedLounge, so far it seems to be working as expected. I often mean to write up things like this, but it takes forever so I rarely do. Was it worth it?
Have an alternate method you like? Leave a trackback or a comment...
Well, I for one appreciate the write-up! It’s the details that can kill ya, and the magic of Google will one day lead people here who were killing themselves to get their checkboxes to line up correctly. Besides, I would think it’s also useful for your own reference.
Thanks! Good luck with Feedlounge! I am really looking forward to trying it out, I hope you open up the alpha a bit more soon! (Maybe to Tasks customers??? please?!?)
Arguments are made in favour of *that* positioning of checkbox labels? 😉
Huh?
I mean positioning the labels to the right of the checkbox when all other labels appear to the right of their respective fields. Personally I find that hideous but, as you say, there’s alot of personal preference involved in these things 🙂
The label is considered part of the “data” for a checkbox – it goes w/ the rest of the data.
Here is a good example.
Umm, tables? I’m not talking about fifty deep nested tables with spacer gifs, but just a few to keep content from overlapping or falling completely out of place.
Browser-makers have spent over a decade optimizing for table layouts. Form pages are a grid, why not lay them out that way rather than floating layered boxes?
Frankly, I’ve seen way too much time wasted on tweaking layout CSS, just to get a simple grid you could code in a table in 2 minutes. And you’d end up with a page that would actually render correctly on Netscape 4, a Sidekick, etc.
Note: I’m talking solely about CSS Layout. CSS is awesome for formatting text.
I was about to say, “The difference with the example is that there’s still a label to the left of the checkboxes.” But of course that’s not true. It’s hard to put my finger on why that example ‘works’ and your original illustration doesn’t (for me).
The grouping in the second example is a lot to do with it; maybe my reaction to the sketch just comes from a lack of context…
Anyway, this is in danger of going from ‘cheeky comment’ to outright criticism so, before I put your nose out of joint, I’ll shut up 🙂
It’s all in the line spacing and proximity of the design elements. There is not as much grouping of elements in the above example as there is in the link.
Nice write up! The example you gave was very helpful.
forms are typical tabular data.
what are tables for?
thanks. i nearly had given up to align the label this way. this tutorial has been a great help for me.
Here’s an alternative (using unordered lists, but easily transformed for DIV). No need for pixel hacks or absolute positioning, gracefully handles different font/checkbox sizes. Works in FF1.5 and IE6, provided you are in standards-compliance mode.
ul.Checkboxes
{
padding: 0em;
margin: 0em;
}
ul.Checkboxes li
{
display: block;
list-style-type: none;
clear: both;
float: none;
height: auto;
overflow: auto;
}
ul.Checkboxes li input
{
display: block;
float: left;
}
ul.Checkboxes li label
{
display: block;
margin-left: 0.2em;
margin-top: 0.1em;
float: left;
clear: right;
}
had to change float: left to float: right in ul.Checkboxes li input and it worked fine for me.
what about?
ul.Checkboxes { width : 95px; margin-left: 200px;}
ul.Checkboxes>li { display : inline; }
ul.Checkboxes label { float : right;}
That doesn’t move the checkboxes in from the left as explained above.
some HTML?
[…] https://alexking.org/blog/2005/07/18/css-checkbox-label-positioning […]
Thanks for this nice aritcle. using it on my form and works awesome.
thanks for the effort and the sharing!
Great article. Thanks for the CSS tips.
Yes, it’s worth it! Please keep it up. As Avi Flax predicted, I found this from google right off searching for “checkbox label”. Thank you!
Great article. Thanks for the tips.
[…] Checkbox Label Positioning in CSS | alexking.org […]
Thank you for the above guids
this prooves tables are still useful. One small table or many lines of compatability-trouble css. Thanks for prooving my point.
Yes, it does work! I used the class in the div one level up and cascaded it.
I’m so glad you didn’t take down this page!
I’m not sure I agree with @alexkingorg’s use of ‘gollywockit’ http://t.co/LVkRvo5B 😛 #UI
thanks.this is a clean solution.
Great, thanks! How to postion checkboxes nicely in-line has been driving me crazy for years.