Question

curently I have this for HTML and CSS respectively:…..How would I contruct CSS and html that looks the same using a <div>. The one I created had horizontal scrolling and looked crazy.

<textarea class="textarea_readonly" readonly="readonly" name="mcRemarkOld" rows="7" cols="100" scrolling="auto"></textarea>

---

.textarea_readonly
{
    background-color: #DDDDD0;
    margin: 0px;
    width: 100%;
}

Answer 1

Instead of trying to mimic a div, replace the textarea using JavaScript. Usage (run on load):

var textarea = document.getElementsByName("mcRemarkOld")[0];
turnTextAreaIntoDiv(textarea);

function turnTextAreaIntoDiv(elem){
    var div = document.createElement("div");
    // Copy significant attributes, customize.
    div.className = elem.className;
    div.style.cssText = elem.style.cssText;
    div.id = elem.id;
    div.name = elem.name;
    div.innerHTML = elem.innerHTML; //`<a>` turns in  &lt;a&gt;
    elem.parentNode.replaceChild(div, elem);
}

Fiddle: http://jsfiddle.net/7bTNH/