Error Message Text Not Wrapping within Parent Div

HTML & CSS
1

Hello everyone,

I know I continue to bombard with questions about this form, but this should be my last question for a while. :confused:

Inside the #submissionform div, there is another div near the bottom with the i.d. of #errormessage, which contains a <p> element that the JavaScript appends a message to if the form submission is found to be invalid. The reason I put a div around this <p> element is to keep the submit buttons below from bouncing up and down when the form is either submitted or form is canceled/reset, and that seemed to prevent the buttons from moving by having a fixed height on the div. I can put the error message below the submit buttons, but I like where it is now.

So, I noticed that the error messages were appearing to just run along and not wrap around inside the #submissionform div, and it also wouldnā€™t wrap itself within the width of the actual #errormessage div. So, I tried to find out why this was happening by adding a border to the error message div. I tried quite a few different styles, but I found that Iā€™m stumpedā€¦ again. :rolleyes:

I put in a long string of gibberish just to display what is happening when the text reaches beyond the width at which I desire it to wrap around into a different line.
Here is a screenshot of what Iā€™m describing.

Here is the form markup:


      <div id="submissionform"> <!-- begin 2nd form markup -->
        <form name="form2" method="post" action="Scripts/confirmform.php">
          <div>
            <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span class="required">*</span></label>
            <input type="text" name="confirmemail" id="confirmemail" value="" maxlength="60" class="inputwidth" />
          </div>
          <div>
            <label for="name" class="fixedwidth">Enter your name:<span class="required">*</span></label>
            <input type="text" name="name" id="name" value="" maxlength="60" class="inputwidth" />
          </div>
          <div>
            <label for="age" class="fixedwidth">Select your age range:</label>
            <select name="age" id="age" class="inputwidth">
              <option selected="selected">Select an Age Range</option>
              <option>18-35</option>
              <option>36-55</option>
              <option>55+</option>
              <option>17 or younger</option>
            </select>
          </div>
          <div>
          	 <label for="gender" class="fixedwidth">Select your gender:</label>
             <select name="gender" class="inputwidth" id="gender">
               <option selected="selected">Select Gender</option>
               <option>Male</option>
               <option>Female</option>
             </select>
          </div>
          <div>
            <label for="country" class="fixedwidth">Select your location:<span class="required">*</span></label>
            <select name="country" id="country" class="inputwidth">
              <option selected="selected">Select Country</option>
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Canada</option>
              <option>Australia</option>
              <option>Russia</option>
              <option>Brazil</option>
              <option>Africa</option>
              <option>Somewhere else</option>
            </select>
          </div>
            <p id="spamtext">To prevent spam, please answer:<span class="required">*</span></p>
          	<label for="addition" id="math"></label>
            <input name="addition" id="addition" value="" maxlength="3" />
            <div id="errormessage">
          		<p>aweoigjaoigjoaipwejpgawiojgpoiajgioawhppoarghoapwergiowerjhiopawhgwfgwiopioapwj</p>
            </div>
              <label for="aicatcher" class="aicatcher">Please leave this field blank:</label>
          	  <input type="text" name="aicatcher" class="aicatcher" id="aicatcher" value="" />
          <input type="submit" value="Sign Me Up!" class="formsubmitbutton" id="finalsubmit"/>
          <input type="reset" value="Cancel" class="formsubmitbutton" id="cancel"/>
        </form>
      </div>
    </div>

Here are the styles related to the form:


#submissionform{
	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
	width:330px;
	height:320px;
	position:absolute;
	display:none;
	top:260px;
	left:130px;
	z-index:1;
	padding:60px 10px 0 20px;
	text-align:left;
}
#submissionform div{padding-bottom:3px;}

.fixedwidth{
	width:150px;
	float:left;
}
.inputwidth{width:170px;}
.required{color:red;}

.formsubmitbutton{margin-left:50px; margin-top:18px;}

#errormessage{border:double; color:red; height:40px; padding:0 16px 4px 9px; font-weight:bold; font-size:15px;}
#errormessage p{margin:0; padding:0;}
#errormessage a{color:#09C;}
#errormessage a:hover{color:#0CC; text-decoration:none;}

Many thanks as always. Iā€™m almost done with this project.

2

Itā€™s not realistic to have a long line of text like that with no breaks. That will break your design in any context. Anyhow, you can force text to wrap with

#errormessage p {word-wrap: break-word;}
3

Yes, spaces do work wonders. No need for the typical ā€œLorem ipsumā€ whatever, but it seems to be working a little better with the spaces.

4