Align dl dt dd

Having an issue with this page. I have dl tags which include dt and dd. I have an issue because there are 2 lines of text on the left, and it's not aligning the answers next to the question.

Any help much appreciated.

http://www.findasitter.co.nz/signup.php?type=sitter

 

Whoops, looks like you need to fix your php error first:

Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/kirsty/public_html/findasitter.co.nz/functions-real.inc on line 163

PHP:

 

Sorry - was playing All there now.

 

The quick and dirty method would be to just add line breaks after your definition data wherever your definition term takes up more than one line like so:

<dd>
Baby
<input id="babypreferred_agessignupformfield" type="checkbox" name="sitter.preferred_ages_baby" value="1"/>
Toddler
<input id="toddlerpreferred_agessignupformfield" type="checkbox" name="sitter.preferred_ages_toddler" value="1"/>
Pre-school
<input id="pre-schoolpreferred_agessignupformfield" type="checkbox" name="sitter.preferred_ages_preschool" value="1"/>
School-aged
<input id="school-agedpreferred_agessignupformfield" type="checkbox" name="sitter.preferred_ages_schoolaged" value="1"/>
</dd>
<br/>

HTML:

Optionally, make your dt tag wider so that it does not wrap to the next line like so:

.signup dt {
clear:left;
color:grey;
float:left;
font-family:sans-serif;
font-size:small;
width:400px;/* changed from 250px */
}
.signup dd {
color:black;
font-family:sans-serif;
font-size:small;
margin-left:400px;/* changed from 250px */
}

Code (markup):

 

I thought about making the dt wider, but it simply gets too wide for the page.

Is there no way to vertically align the dd and dt?

 

Unfortunately, no. At least not with CSS. There is a vertical-align attribute for tables and images, but no such attribute exists for CSS outside of tables and images. As you're probably finding out by now, large forms that include a variety of form elements are one of the hardest things to layout with CSS.
If everything was on one line, then you could vertically align and element by setting a line-height, but even this has problems once you wrap to a new line.

I'm sure I will get hammered by some CSS purists, but in my opinion tables still exist, have valid uses, and are perfectly acceptable for presenting form data, certainly better fitting than using definition lists. After all, it's nothing more than interactive tabular data and tabular data is the reason for the existence of tables in html.

 

i am facing this same problem will you help me

 

Damn sounds like i need to use a table for that one I've managed everything else with CSS i feel bad about that

 

I disagree with the use of definition lists for forms, mainly because forms already have that relationship between labels and inputs that dt's have with dd's.

But leaving them as they are, you should still at least put labels in your dt's

<dt><label for="IDoftheInput">Label text</label></dt>

You can see an example at http://fronteers.nl/inschrijven (still don't agree with it there).

For most of your boxes to align, you'd want to do something like giving everyone the same amount of bottom margin.

Your dt's on the left seem to be much more spaced out than the dd's on the other side, and that's why they don't line up (where each side is one line). See below for multi-line dt's.

Routinely with definition lists and forms I give some bottom margin for this reason.
Here's an example you can look at for definition lists in general:
http://stommepoes.nl/Homeselling/homesellinghuis.html
where the CSS for the things is like:

dl {
  width: 29em;
  float: left;
  font-size: 1em;
  overflow: hidden;
}
	#huisgegevens div dl {
	  width: 100%;
	}

dl dt {
  clear: both;
  float: left;
  width: 11.5em;
  padding: 0 0 .5em .2em;
  font-weight: bold;
}
	#huisgegevens dl dt {
	  width: 49%;
	  padding-bottom: .2em;
	}
dl dd {
  float: left;
  width: 16em;
  padding: .2em;
}
	#huisgegevens dl dd {
	  width: 48%;
	}
	#huisgegevens dl dd.kort {
	  width: 9em;
	  white-space: nowrap;
	}
		#huisgegevens dl dd.kort span {
		  margin-left: 1em;
		}
	[b]	* html dl dd {float: none;}
		*+html dl dd {float: none;}[/b]

	#huisgegevens dl dd.lang {
	  clear: left;
	  float: none;
	  width: 99%;
	}

Code (markup):

If you wanted to ignore all the specific version of dl's you just look at the left-most declarations, where the basis is written. You see in bold the IE conditions: not floating the dd's. That's from http://www.pmob.co.uk/temp/definition-list.htm
and the problem with IE letting floats clearing floats is http://www.search-this.com/2007/09/05/lets-be-clear-about-this/

Here's another Dl setup, where the right side could get multi-line:
http://stommepoes.nl/Scooterverzekeren/scooterafsluiten2.html

Where the dt's are floated, but the dd's are just left alone, with just a left margin. This looks like your current setup.

dl {
  float: left;
  width: 36em;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #535459;
}
	dt {
  	  clear: left;
  	  float: left;
  	  width: 16em;
  	  line-height: 150%;
  	  padding: 0 5px;
	}
	dd {
          margin-left: 14em;
  	  font-weight: bold;
  	  line-height: 150%;
	}
	dd.premie {
  	  text-decoration: underline;
	  margin-bottom: 1em;
	}

Code (markup):

You'd prolly need a table only if you wanted borders on the things to line up. That often does not work well cross-browser... but your form can look respectable with pure form controls (or dl's if you insist) and CSS.

I think because the left side can possibly be multiline, you may have to go over to floating the dd's as well, and then not-floated for IE (IE8 should be fine leaving them floated).

 

Thanks so much. I fluffed around with it for hours and just couldn't get it to work - so have my first ever table on the site

 

You still don't have labels in your form:
<th>Email Address:</th>
should be
<th><label for="emailsignupformfield">Email Address:</label></th>
<td><input type="text" name="user.email" id="emailsignupformfield" class="signupformfield" /></td>

Use of labels is pretty important. They are a basic component of forms. By adding the "for" attribute, the label can be linked to the input.