I am placing a CKEditor dialog inside a DIV with RELATIVE positioning. When the TEXTAREA displays (without invoking CKEditor), it is perfectly positioned. When it is replaced by the CKEditor, it seems to create a space on the page where it would have been without being positioned by the style:height definition. The editor displays in the right position, but the extra space it creates is throwing the rest of the page off.
Here's my code snippets:
objEditor = CKEDITOR.replace('snd_message_txt', {
toolbar: [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Paste', 'PasteText', 'PasteFromWord', 'Spell']],
scayt_autoStartup: true,
height: '100px', width: '396px'
});
<div id="newMsgDiv" style="position:absolute;top:376px;left:202px;height:250px;width:396px;background-color:#c0c0c0;">
<input id="snd_to_name" class="textboxPrompt" style="position:relative;top:0px;left:0px;width:296px;height:20px;" type="text" value="Type Last Name, First Name or Emp ID" />
<div class="bttn" style="position:relative;top:-22px;left:298px;width:48px;height:20px;">TO</div>
<div class="bttn" style="position:relative;top:-43px;left:348px;width:48px;height:20px;">CC</div>
<div id="toLstDiv" class="textboxPrompt" style="position:relative;top:-41px;left:0px;width:198px;height:50px;overflow-y:scroll;overflow-x:hidden;background-color:White;">To...</div>
<div id="ccLstDiv" class="textboxPrompt" style="position:relative;top:-91px;left:200px;width:196px;height:50px;overflow-y:scroll;overflow-x:hidden;background-color:White;">CC...</div>
<input id="snd_message_subject" class="textboxPrompt" style="position:relative;top:-91px;left:0px;width:396px;height:20px;" type="text" value="Subject" />
<div id="sndMsgTxtDiv" style="position:relative;top:-92px;"><textarea id="snd_message_txt"></textarea></div>
</div>
