0
113
ViewsHTML moving at random after page refresh
My HTML sometimes move to the side bit by bit when I reload a page (just pressing F5), without any change to forms, JS, CSS, etc. until it reaches the left side of the screen. The last screenshot shows that the HTML element (same for the #content div) doesn't even cover the 'empty' space, (i.e. there is no margin, padding or whatever) and it's just random (I'm using Chrome), 95% of the time the page works fine, but all of a sudden, it starts moving to the side at random after each reload.
It uses the Bootstrap 2.3.2 as the base framework. The page has a ton of JS and CSS, so let me know if you need some code more specific, but it's a behavior that I've never seen before and have no clue what's causing it. If someone can shed some light on the issue I'd appreciate.
Basic structure of the page:
#header {
height: 77px;
position: fixed;
width: 100%;
z-index: -9;
top: 0;
background-color: #333333;
background-image: none;
box-shadow: none;
border-bottom: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
#user-header-actions {
position: relative;
z-index: 10;
width: 100%;
margin-left: 215px;
height: 40px;
background-color: #333333;
}
#sidebar {
top: 77px;
position: fixed;
height: 100%;
overflow-y: auto;
display: block;
float: left;
width: 220px;
z-index: 16;
}
#content {
margin-top: 38px;
background: none repeat scroll 0 0 #eeeeee;
margin-left: 220px;
margin-right: 0;
padding-bottom: 25px;
position: relative;
min-height: 500px;
width: auto;
border-top-left-radius: 8px;
}<html lang="en>
<head>...</head>
<body>
<div id="header" class="hidden-print">Header</div>
<div id="user-header-actions" class="hidden-print">Top bar</div>
<div id="sidebar" class="hidden-print">Sidebar</div>
<div id="content">Content that moves randomly to the side on page reload</div>
</body>
</html>
2 answers
Answer question0
- Try to remove
float: left;from #sidebar, you do not need any float on element with fixed position - It seems you do not need
width: auto;on #content - Did you try it in incognito mode, maybe some of extentions add some additional html which broke layout? But I vote for p. 1. with unnecessary float.
0
Found out that the problem happens when the page has no scrollbar but you expand some element (like an accordion for ex.) and the browser shows the scrollbar. If you reload, the content is shifted by the browser's scrollbar width.
The solution I found was to set body { overflow-y: scroll; } so the scrollbar is always visible.