Need to add wrapping text to my div - html

Question

Hello guys I have a div above a textarea and they both are the same width, when I submit my form the div widens out. How can I maintain the same size with word wrapping? Thanks?
CSS:
div.tarea {
background-color: #DDDDD0;
font-family: arial, sans-serif;
font-size: 10pt;
margin: 0px;
width: 100%;
height: 100px;
overflow-y:auto;
border:2px grey solid;
}
HTML:
<tr>
<td colspan="4">
<c:if test="${action == 'update'}">
<%-- Preserve the indentation for this TEXTAREA in order to keep extra whitespace out of it. --%>
<div class="tarea" name="mcRemarkOld" ><c:forEach var="mcbean" items="${form.mcRemarks}">--- ${mcbean.auditable.lastModifiedBy.firstName} ${mcbean.auditable.lastModifiedBy.lastName}, <fmt:formatDate value="${mcbean.auditable.lastModifiedDate}" pattern="${date_time_pattern}" />
<br><br>${mcbean.remark}
<rbac:check operation="<%=Operation.ADMIN_UPDATE%>">
<a class="edit_activity" href="show.edit_remarks?remarkId=${mcbean.id}&type=1&hotPartId=${form.hotPartId}"><img class="edit" src="../images/icon_edit.gif" border="0" alt="Edit"/></a>
</rbac:check>
<br>
<br>
</c:forEach></div><br/>
</c:if>
<rbac:check field="<%=Field.HOT_PARTS_SOR_REMARKS%>" display="none">
<TEXTAREA tabindex="20" name="mcRemark" rows="7" cols="100" scrolling="auto" <c:if test="${not empty lock && !lock.locked && action != 'add'}">disabled="disabled"</c:if>>${form.mcRemark}</TEXTAREA>
</rbac:check>
</td>
</tr>

Answer 1

You can use the CSS property, word-wrap. This should work in all major browsers according to: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp.
div.tarea {
background-color: #DDDDD0;
font-family: arial, sans-serif;
font-size: 10pt;
margin: 0px;
width: 100%;
height: 100px;
overflow-y:auto;
border:2px grey solid;
word-wrap:break-word;
}

Answer 2

div.tarea {
width: 100%;
height: 100px;
overflow: hidden;
float:left;
text-overflow: ellipsis;
}

Answer 3

I resolved the problem by adding:
<td width="800px" colspan="4">