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

Posted on 2010-08-19
Last Modified: 2012-06-22
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?
Question by:benjaminfam
LVL 10

Expert Comment

by:Casey Herman
ID: 33479071
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.

Expert Comment

ID: 33479267
You could use a DIV tag next to the checkboxes inside of table that has the text that is wrapping.
(See below)

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

Hope that helped.

Expert Comment

ID: 33479339
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. ;)
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.


Author Comment

ID: 33479442
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.
LVL 14

Accepted Solution

Designbyonyx earned 500 total points
ID: 33479603

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<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;



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



Open in new window


Author Closing Comment

ID: 33484351
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!

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Show tab when enter div and change underline color 3 63
Select case on click 3 21
Can't get js include to work in html file 8 20
key press alert 2 32
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question