Comments on: Checkbox Label Positioning in CSS

By: GodsArse

GodsArse — Wed, 09 Dec 2009 18:45:43 +0000

this prooves tables are still useful. One small table or many lines of compatability-trouble css. Thanks for prooving my point.

By: radhakrishnan

radhakrishnan — Tue, 08 Dec 2009 13:57:31 +0000

Thank you for the above guids

By: All my bookmarks ever | Daniel John Gayle

All my bookmarks ever | Daniel John Gayle — Fri, 29 May 2009 23:50:41 +0000

[...] Checkbox Label Positioning in CSS | alexking.org [...]

By: TASARIM

TASARIM — Sun, 19 Apr 2009 09:59:40 +0000

Great article. Thanks for the tips.

By: john

john — Wed, 12 Nov 2008 17:39:55 +0000

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!

By: Dixi

Dixi — Thu, 02 Oct 2008 11:35:16 +0000

Great article. Thanks for the CSS tips.

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.