<div> styling issues

Question

im trying to make this div have the same styling properties as my textarea below it with the height/width and vertical scrolling: I guess I would have to add this to the css, but not sure how to implement. Thanks for the help

css:

/* Hot Parts...mimics a textarea */
div.tarea {

background-color: #DDDDD0;
margin: 0px;
font: small courier;
width: 100%;
height: 100px; 

}

html:

<div class="tarea"  name="mcRemarkOld" ><c:forEach var="mcbean" items="${form.mcRemarks}">--- ${mcbean.auditable.createdBy.firstName} ${mcbean.auditable.createdBy.lastName}, <fmt:formatDate value="${mcbean.auditable.createdDate}" pattern="${date_time_pattern}" />

        <br><br>${mcbean.remark} ---    <a href="show.view_hotparts_guidelines?id=${mcbean.id}">EDIT!!!!!!</a> 
        <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>

Answer 1

In addition to Jim's answer, I think a good idea would be for you to create a CSS class to apply to both the text-area and the div. Make the class have all the attirbutes you want them to share and apply it to the text box and the div. This will let you get similar font's, backgrounds, text-sizes, scrolling, etc without multiple css definitions (and it'll be easier to keep them in sync when you modify them later in the project life).

.uniformTextDiv {
    width:       800px;
    font-family: verdana;
    font-size:   14px;
    background:  #ffffff;
    overflow-y:  auto;
    /* etc */
}

Then apply it to your textarea and your div with class="uniformTextDiv" on each.

Answer 2

If you want to add vertical scrolling to it, add the line

overflow-y:auto;

to your CSS.