Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2010-08-19
6
Medium Priority
?
470 Views
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?
programslist.png
0
Comment
Question by:benjaminfam
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
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.
0
 

Expert Comment

by:flybeye
ID: 33479267
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
 
LVL 3

Expert Comment

by:JtR
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. ;)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:benjaminfam
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.
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 2000 total points
ID: 33479603

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

Author Closing Comment

by:benjaminfam
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!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

609 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