Out-of-the-box the editor’s width is set to 100%, this calls the editor to expand to the full 100% width of its container. If the container is 200px then the editor will expand to the full 100% width of that 200px container however, as different configurations vary you can also define the width of the editor in pixels...
 

Setting the width of the editor

To do this please visit ‘Extensions’ (which is in the top navigation menu) and navigate down to the ‘Plug-in Manager’ menu item. In the Plug-in Manager use the ‘Filter’ to locate the 'JoomlaCK' plug-in and then click on the 'Plugin Name' to edit and open up into a screen-called ‘Plugin: [Edit]’. On the right hand-side you will notice a list of parameters. Navigate down to ‘Width’ and define the width in pixel’s. Lastly click on apply to save the new settings.

Setting the width of the editor in the template CSS

The editor defines its width and height values in inline styles (in the code). The good news is that template 'CSS' styles take preference over the editor's inline styles. This means that we can overide height and width of the editing area by calling the "table.cke_editor" class. This will allow you to  call the editor in different sizes, in different layouts, on diffrent pages.

It would look something similar to the example below:

.yourcomponentname table.cke_editor {
    width: 500px;
}