wrapping labels

any way to get them not to sit to the left underneath the input?

[natty]

hi all

ok ill try to make this as simple as possible.

if you have some checkboxes.. with labels..
a bit like this...

<p class="option">
<input type="checkbox" name="check1" id = "check_1" value="1" />
<label for="check_1" class="wrapit">option 11111111111111111111 1111111111111111111111111</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_2" value="2" />
<label for="check_2">option 2222</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_3" value=3" />
<label for="check_3">option 3 333 3333</label>
</p>

when the labels are very long, and need to wrap on the page, is there any way of getting them NOT to sit underneathe the checkbox itself.. other than cahnging the markup to have the check in a seperate cell..?

also anyone know of a reliable way of centering form elements, without using tables.?
atm I have set it up like this..

<table>
<tr>
<th colspan="3"><p class="q">Here is the question text Here is the question text Here is the question text Here is the question text Here is the question text </p></th>
</tr>
<tr>
<td class="l">&nbsp;</td>
<td class="c">
<p class="option">
<input type="checkbox" name="check1" id = "check_1" value="1" />
<label for="check_1" class="wrapit">option 11111111111111111111 1111111111111111111111111</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_2" value="2" />
<label for="check_2">option 2222</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_3" value=3" />
<label for="check_3">option 3 333 3333</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_4" value="4" />
<label for="check_4">option 44 444 4444444 444 4444</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_5" value="5" />
<label for="check_5" class="wrapit">option 5555555 5555555 5555555 555555 555555 5555555555555555 555555</label>
</p>
</td>
<td class="r">&nbsp;</td>
</tr>
</table>

CSS for that

p{
font-weight:bold;
}
p.option{
text-align:left;
font-weight:normal;
white-space: nowrap;
}
p.textbox{
font-weight:bold;
}
label.wrapit{
white-space:normal;
}
/* PAGE FORMATTING */
table{
width:100%;
margin:20px 0px;
}
td.c{
text-align:center;
margin:0px auto;
vertical-align:top;
}
td.l{
width:40%;
background-color:#cfc;
}
td.r{
width:40%;
background-color:#cfc;
}
td.c table td{
padding: 10px;
vertical-align:top;
}
td.rating{
text-align:center;
}
td.rating_question{
white-space: nowrap;
text-align:right;
}
th.rating_header{
vertical-align:bottom;
}

not really sure why i am worrying about having tables, as divs not easily going to achieve this i think

any help much appreciated

thanks

[Xapti]

Form elements such as input are inline elements just like images, so text-align:center on their container would center them. (or one could set display:block, and add margin:0 auto and a width)

When it comes to keeping an indent for next lines for elements such as checkbox inputs, the solution I can think of would be to float the input (left), and add a margin (left) to the label/description. Floating both (without margin) should also do the same thing, but each have their advantages/disadvantages. In both cases, you will likely need to specify certain widths of elements. I do not know of, or at least remember, a method which works for random fluid lengths without manually sizing to the largest known one.

[edited by: Xapti at 5:40 am (utc) on Jan. 25, 2008]

[natty]

Hi Xapti

thanks for the reply

i had tried doing the block with a width set, with the margin 0 auto to center it, sadly, as they multiple form elements on the page have different widths setting the width on that centered div, to catch all widths of elements doesnt work - it puts the LHS of that element at the correct width for the CSS rule - and pushes the rest over, so it doesnt sit central.. unless i was somehow able to know what the width would be before i built the markup.. which is a no no, as the idea is to as i may have said, have a catch all set of styles for any width of form element..
even with the text-align: center means that the options for radio groups etc will also center align thus not left aligning nicely - which is why i went for table cells, which i can over specify the width of the side cells so that the center one with a no wrap will simply center on the longest width in the center cell.. not pretty but more robust it seems..
had also thought of again floating 3 divs up against each other, but again that works best with pixel perfect type of layouts, which this cannot be..

ill also had thought of doing the margin left float thing, but that screws with my no-wrap bit. - also had specified a .letitwrap class for long elements - labels as i mentioned..

nat