Side-by-side diffs are not side-by-side

Question

This only seems to be an issue here on Meta. When in the side-by-side edit view, the two versions appear above each other instead of beside. The issue does not seem to depend on the browser width, and does not occur for side-by-side markdown.

Answer 1

The reason for this is that the #mainbar-full div has a different width here than on other Stack Exchange sites. For example, on Stack Overflow, the element has the following styling:

#mainbar-full,.mainbar-full {
    width:980px
}

However, on Meta SE, the following rules exist:

#mainbar-full,.mainbar-full{
    width:980px;
    float:left;
    padding-bottom:1px
}

#mainbar-full {
    padding:20px;
    width:940px
}

So the later rule will override the (default SE style?) 980 pixel width that is also used on other Stack Exchange sites and instead set a width of 940 pixel plus 20 pixel padding on each side. While this will result in the same total outer width for the element (20 + 940 + 20), the content will still have 40 pixel less to spend.

Now, each post excerpt on each side of the actual-side-by-side diff get this style:

#revisions .sidebyside-diff>div{
    float:left;
    margin-right:20px;
    width:440px
}

So each post will occupy 460 pixels, resulting in a total width of 920, although—at this depth due to margins and paddings of other elements—only 910 pixels are left, being just 10 pixels short to display it next to each other.

So a simple fix that wouldn’t impact the layout too much would be changing the #mainbar-full to a width of 950px and a padding of 15px instead to make it work again. But of course, the padding can also be further reduced to make it more safe.

(The exact same situation applies to graphicdesign.SE.)

Answer 2

Jin pushed a fix that will go live in the next build. Keep an eye out for rev 2014.4.24.2188.