The UX issue of the Markdown preview being under the edit box has been discussed several times:
- Putting the edit box and the markdown box side by side
- Synced vertical scrollbar in the markdown preview (no answer)
- Preview on the right please, optionally?
- Can't see the preview at the bottom of a long post (Math.SE)
The answers proposed brought up several counter-arguments to implementing a side-by-side preview:
- "screwing low-res users", along with statistics of visitor screen size, as of 2010
- "The design of the site is always a single column downward. When anything expands, it expands further downward."
- this could be done via userscripts [NB: I hadn't found any that worked]
- the side panel displays useful information, such as the Similar Questions list
I would like to propose a different solution that's already implemented in SE-inspired discussion software Discourse and works very well:
Advantages
- tried & tested - Discourse is mature software
- familiarity - Jeff Atwood is/was behind both SE and Discourse
- the code is already available - Discourse is open source
- autoscroll is implemented
- accessible to low-res users as well via the fluid layout. The screencast above is shot at about 1024px width
- preserves the sidebar - you can see related topics in Discourse; SE can display related questions
- the "hide preview" link reverts to a single-column editor, and could place the preview under it, to replicate the current layout
For those who want to make sure they avoid horizontal scrollbars in code blocks, the preview area could be sized by default to the current preview size, and a divider between the editor and the preview (just as Discourse has one between the editor+preview and the posts area) could allow further control over the editor vs. preview width.