         @preview.maxheight(offset:button_bar_height)
 
         @_dragbar.height(@source_editor.element.height())
-        @_dragbar.css('top',top-9)  # -9 = ugly hack
+        @_dragbar.offset(top: @source_editor.element.offset() + button_bar_height)
+        @_dragbar.css('top', "#{@edit_buttons.height() + button_bar_height + 9}px") # +9 is not good
 
         # position the preview
+        @preview.offset
+            top: @source_editor.element.offset() + button_bar_height
+
         @preview.css
             left  : editor_width + left + 7
             width : width - (editor_width + left + 7)
-            top   : top
-
+            top   : "#{@edit_buttons.height() + button_bar_height + 15}px"
 
     focus: () =>
         @source_editor?.focus()


        @_dragbar.css('left',editor_width+left)

        @source_editor.show
            width : editor_width
            top   : top + @edit_buttons.height()

        #     * source editor -- a CodeMirror editor
        #     * preview/contenteditable -- rendered view
        @ext = filename_extension_notilde(@filename)   #'html' or 'md'
        # console.log("HTML_MD_editor", @)

        if @ext == 'html'
            @opts.mode = 'htmlmixed'
