How can I match the layout in edit and preview?

  • Author
  • #1209798

    When I am creating a post and insert images I find that although I can get the layout right in the wysiwyg editor this does not translate as the correct layout when previewing the post. I have to make numerous adjustments such as adding or removing lines in order for things to display as I want them.

    I am using Oulipo which is quite narrow and I’m sure this is the issue, but is there an easy way round this?


    The blog I need help with is



    Have you tried using Windows Live Writer? It knows how wide themes are and accounts for it.


    I have never heard of that. Do you have more info?




    The “wysiwyg editor” is not a wysiwyg editor: it has the same width and the same font no matter what the theme (with a few exceptions). What exactly are you trying to do?



    I was trying to align images in various positions but was finding that how it looked in the editor was not how it looked in my layout (text wrapping problems, essentially) and I was having to mess about with it to get it looking right.

    (I meant wysiwyg as opposed to the text option.)

    Thanks for the link. Will check it out.



    Saying “images”, “various positions”, “how it looked”, “text wrapping problems” is as vague as your original question. If you want precise help you need to make precise questions: link to a post you’re having problems with and tell us exactly what you’re trying to do or what you want to change.


    I apologise for having a general query rather than a specific issue or bug.

    The problem occurs with ALL posts, and it is simply that arranged pics and text how I want them in the editor things then get squeezed in to my narrower style, causing the alignment to be forced out of kilter.

    I get it right eventually, but it is a fiddly process and I was looking for tips to make life easier.

    It looks like the Live Writer will be the best thing to pursue.

    Thanks to everyone for their help.



    Your general query has been answered: what you think of as a wysiwyg editor is not a wysiwyg editor. The Visual editor is the same no matter what the theme, while each theme has a different column width (plus different font family and font size for regular text, and different styling for specially formatted blocks such as blockquotes or headings).
    To see the actual result when editing a post, you need to click Preview.
    What I do with my posts is publish them as private at first, check the result on the actual blog, then turn them to public if I’m satisfied with the result or after I make adjustments.

    In your first post above you wrote:
    “I have to make numerous adjustments such as adding or removing lines in order for things to display as I want them.”
    What do you mean by that? Lines of text or blank lines? If you mean adding blank lines to correct text-wrap issues, that’s wrong – you need a different solution.


    Thanks for the clarity about the editor. That does explain a lot.

    To fix the text wrap I have previously relied on adding blank lines, which is a messy method. What is a better way of doing this?




    Using Windows Live Writer, which translates that into web-viable code.



    Adding extra blank lines isn’t just messy, it’s plain wrong (for various reasons I needn’t explain now). Assuming you mean you insert a left or right aligned image, and you want some text next to it, but you want to prevent the rest of the content from also wrapping around, you switch the editor to Text (=code) and paste this before the rest of the content:
    <div style="clear: both;"></div>


    Thanks justpi. I’m guessing the blank lines method is wrong on a coding level and may not work in other browsers so may still not achieve what I think it has.

    Thanks for the code fix. Will give that go.

The topic ‘How can I match the layout in edit and preview?’ is closed to new replies.