Way to margin-left the whole FCK-Textarea

The css file for the fck text area is set in the fckconfig.js file. To alter the left margin of the editor itself, I put the editor in a div, which I then alter the margin of. Doing both of these, I end up with a text area of the exact width (and other styles) of the content div it is going to go in, while the editor borders themselves are set to nicely clear the text area to the left and right.

I put the editor in a div with class FCKEditor and use this css to make the editor wider than the boundaries of the containing div:

#mainContent div.FCKEditor {
margin: 0 -14px 0 -6px; /* the editor border needs space for its border, padding and scroll bars (on right) */
}

This then means that the content inside the editor can have exactly the width of the div that it is going to end up in (in this case #mainContent).

The css file used inside the editor is defined by this setting in your fckconfig.js file:

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;

The best solution is to point the editor to a css file of your own, which will give the text inside the editor area the same appearance as the part of your site it's going into. For easiest maintainability, that will be set within a custom configuaration file, that you reference when you open the editor (the wiki at http://wiki.fckeditor.net/ tells you how to do this under 'configuration').

The line in your custom configuration file will read something like:

FCKConfig.EditorAreaCSS = '../../[yourfilename].css';

You could of course just change the line in fckconfig.js file itself, or go set the margin you want directly in the 'css/fck_editorarea.css' file, but not advised.