8
$\begingroup$

As of right now, the sidebar is appearing below the content, with vertical and horizontal scrollbars around the #content div.

Imagine there is a red freehand circle around the misplaced sidebar...

This appears on Physics and Physics Meta, but I haven't seen it on any other sites.

I'm using Google Chrome 45.0.2454.101 46.0.2490.71 provided by Google's Yum repository, on Fedora 22 with KDE. I don't see it in other browsers, so I think it may be something specific to Chrome.

Interestingly, when I reduce zoom from 100% to 90%, then the scrollbars disappear and the sidebar returns to its proper place, but then everything's too small...

screenshot-physics.stackexchange.com 2015-10-14 11-45-59.png

$\endgroup$
2
  • 1
    $\begingroup$ We should be getting a new style for the site sometime in the near(?) future, so hopefully this will be fixed with that update, if not sooner. $\endgroup$
    – David Z Mod
    Commented Oct 14, 2015 at 16:42
  • $\begingroup$ The site's CSS does seem to be behaving pretty wildly of late. This is from a couple of weeks ago, note the blue text which later went back to the usual light orange-brown thing. (Chrome 45 standard over Ubuntu 14.04.) $\endgroup$
    – Emilio Pisanty
    Commented Oct 14, 2015 at 16:53

1 Answer 1

Reset to default
1
$\begingroup$

This is an issue with the margin-left on the #feed-link element. I see this on Chrome 45.0.2454.101 and Firefox 41.0.1 as well. 100% Zoom.

While the problem in particular is the #feed-link element, the strange behavior is caused by the margin declaration. Adding a non-zero margin to the bottom margin will resolved this issue.

I'm not sure what the exact cause of this problem is but there are three elements related to these elements:

  • #content
  • #mainbar
  • #feed-link

The problem with #content is that on Physics.SE the width is 975px, while on other SEs, like Arqade (a graduated site with a custom style) and Anime.SE (a graduated site with no custom style), the margin is 1000px.

The #mainbar is different here vs other sites for some reason...

The rendered style on Anime.SE (which I assume is the beta template without the beta in the name) is:

#mainbar, .mainbar {
    float: left;
    width: 728px;
    margin: 0px;
    padding: 0px;
}

However on Physics.SE, it's like this:

#mainbar, .mainbar {
    float: left;
    margin: 10px 10px 20px 0;
    width: 728px;
}

#feed-link is like this on Physics.SE:

#permalink, #feed-link {
    text-align: left;
    width: 200px;
    float: right;
    clear: both;
    margin: 15px 15px 0 30px; /* margin declaration here is related to the issue */
    white-space: normal;
}

#feed-link {
    text-align: right;
    float: right;
    clear: both;
    margin: 15px;
    white-space: nowrap;
}

On other sites like Anime.SE, the #feed-link selector comes before the #permalink, #feed-link selector (refer below, the latter (#permalink, #feed-link) takes precedence over the former (#feed-link) in the case of Physics.SE). 

#feed-link {
    text-align: right;
    float: right;
    clear: both;
    margin: 15px;
    white-space: nowrap;
}

#permalink, #feed-link {
    text-align: left;
    width: 200px;
    float: right;
    clear: both;
    margin: 15px 15px 0px 30px;
    white-space: normal;
}

Possible solution: The culprit is very likely to be an element within #feed-link, or more likely something inherited by the #feed-link-text element. I haven't had the time to investigate further, but adding a positive value for the bottom margin (e.g, margin: 15px 15px 1px 30px;) fixes the issue with the scroll bars and the sidebar. Therefore I must conclude that there's something within the #feed-link container element that's likely causing this display issue, because by applying overflow: hidden; to this element fixes both problems as well.

Increasing the width of #content will fix the sidebar but not the scrollbars, the same result occurs when reducing the left margin on #mainbar.

$\endgroup$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .