Comments on: Checkbox Label Positioning in CSS

By: tom

tom — Tue, 21 Aug 2007 04:02:08 +0000

Thanks for this nice aritcle. using it on my form and works awesome.
thanks for the effort and the sharing!

By: How to Style Forms in CSS « Kenjun

How to Style Forms in CSS « Kenjun — Sat, 11 Aug 2007 14:51:54 +0000

[…] http://alexking.org/[...]-positioning […]

By: km

km — Wed, 13 Sep 2006 22:39:21 +0000

some HTML?

By: Alex

Alex — Wed, 13 Sep 2006 22:37:05 +0000

That doesn’t move the checkboxes in from the left as explained above.

By: km

km — Wed, 13 Sep 2006 22:34:24 +0000

what about?

ul.Checkboxes { width : 95px; margin-left: 200px;}
ul.Checkboxes>li { display : inline; }
ul.Checkboxes label { float : right;}

By: Richard Tallent

Richard Tallent — Mon, 01 May 2006 21:22:59 +0000

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;
}

By: chris

chris — Mon, 03 Apr 2006 10:37:58 +0000

thanks. i nearly had given up to align the label this way. this tutorial has been a great help for me.

By: Anonymous

Anonymous — Sun, 19 Feb 2006 09:57:57 +0000

forms are typical tabular data.
what are tables for?

By: Don

Don — Mon, 21 Nov 2005 20:53:13 +0000

Nice write up! The example you gave was very helpful.

By: ubergrafik

ubergrafik — Mon, 26 Sep 2005 02:13:30 +0000

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.

By: Lauire Harper

Lauire Harper — Wed, 20 Jul 2005 03:18:34 +0000

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

By: Joe W.

Joe W. — Tue, 19 Jul 2005 23:03:37 +0000

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.

By: Alex

Alex — Tue, 19 Jul 2005 21:02:56 +0000

The label is considered part of the “data” for a checkbox - it goes w/ the rest of the data.

Here is a good example.

By: Lauire Harper

Lauire Harper — Tue, 19 Jul 2005 20:55:40 +0000

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

By: Alex

Alex — Tue, 19 Jul 2005 04:46:50 +0000

Huh?