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?
programslist.png
benjaminfamAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
DesignbyonyxConnect With a Mentor Commented:

<!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>

Open in new window

0
 
Casey HermanCitrix EngineerCommented:
Without seeing the HTML, My only suggestion would be to use tables to place your check boxes in one td and the descriptions in the next...if you are using different styles for the check boxes and the descriptions, try using <th> for one and <td> for the other.

Hope this helps.
0
 
flybeyeCommented:
You could use a DIV tag next to the checkboxes inside of table that has the text that is wrapping.
(See below)

Example:
<table ...>
<td.width=5%><input type="checkbox"...></td>
<td width=95%...><div style="text-align:left;">Elem./Early Childhood Education (PK-4) w/Special Education (K-8)</div></td>
</table>

Hope that helped.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
JtRCommented:
is your layout formatted with tables or CSS divs ?

in both cases you need to "box" the checkbox and the text in two seperate divs or rows and than put another <div> or <td> around it to press it together. ;)
0
 
benjaminfamAuthor Commented:
I'm building the columns using tables and I use CSS for various formatting.  However, it seems like the consenus is to solve this problem by adding extra columns to the table and put the check boxes in it.  I suppose that should work. I'll give it a shot.
0
 
benjaminfamAuthor Commented:
This is exactly what I was trying to figure out.  I knew there had to be a way using CSS.  This is a much cleaner way to do it.  Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.