# Site sidebar appears below content in Google Chrome

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...

• 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. – David Z Oct 14 '15 at 16:42
• 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.) – Emilio Pisanty Oct 14 '15 at 16:53

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

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;
}


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;
}

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


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


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.