Question : Using CSS to Outdent a list of checkbox form elements in a table

I have a two-column table with a list of html checkbox form elements. I would like it to appear so that if the text wraps around on a given line, that it doesn't wrap back under the checkbox, but rather stays aligned with the line of text above it. I'm figuring this would be pretty easy to do with CSS, but I haven't figured it out. See the attached image. There are a handful of items that wrap around to a second line. Any tips?

Attachments:

programslist.png (36 KB) (File Type Details)

screenshot of current display without desired alignment

Answer : Using CSS to Outdent a list of checkbox form elements in a table

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title>Text Indent Example</title>
<style type="text/css">
div.wrapper {
	width: 15em;
	padding-left: 2em;
	border: 1px solid blue;
	overflow: visible;
	text-indent: -1.3em;
}
</style>

</head>

<body>

<div class="wrapper">
<div><input type="checkbox" id="cb1" /><label for="cb1">Some checkbox label that is long enough to wrap</label></div>
<div><input type="checkbox" id="cb2" /><label for="cb2">Some checkbox label that is long enough to wrap</label></div>
<div><input type="checkbox" id="cb3" /><label for="cb3">Some checkbox label that is long enough to wrap</label></div>
<div><input type="checkbox" id="cb4" /><label for="cb4">Some checkbox label that is long enough to wrap</label></div>
</div>

        

</body>
</html>