CSS fixed div. Avoid unwanted overlap
I have a CSS layout with 2 columns. the navigation column on the left is the fix div. It stays there, scrolling through the main content in the column to the right.
The problem occurs when I shrink the browser window or zoom in: when the browser windshield scrolls horizontally, the main content on the right starts to overlap the navigation column on the left.
How can I fix this so that no matter the size of my browser window or my zoom level, when I scroll horizontally, the fixed div doesn't overlap, but pushes the main column to the right?
You can see it for real: http://justarandomone.tumblr.com/
All the code is in the source (it's pretty messy, sorry about that).
Hope someone can help. Thank!
source to share
not really a problem. anyway, i think you could fix this by putting the main content block in a div and giving it absolute positioning. remove the float: to the left of the sidebar, this is optional.
#container {
width:751px;
margin-top:56px;
}
#sidebar {
width:235px;
position:fixed;
top: 0px;
left: 0px;
}
#content {
position: absolute;
top: 0px;
left: 235px;
width: 516px; /* 751 -235 */
}
source to share
you can give #sidebar a solid background color (eg white); put it on top of the stack with a z-index (any number greater than the z-index of the right side, for example 1); Alternatively, you can stretch the #sidebar with height: 100%. Finally, you probably want the #sidebar to appear to cover the entire height of the left side, you can add "top: 0" to achieve this.
source to share
I can recreate when chrome shrinks to abnormally small window sizes as well as on iPhone. Setting the sidebar div to position:fixed
causes it to stay in position; causing problems with horizontal scrolling.
I switched sidebar position:absolute
and then syncronized top-margin
for both sidebar and blogroll and it seems to work fine.
source to share
Possible suggestion. use css to set both "blogroll" and "side" height to the same value (in this example I used 100%). They add 'overflow: auto;' on 'blogroll'
#sidebar {
width:235px;
height:100%;
float:left;
clear:both;
position:fixed;
}
#blogroll {
width:558px;
margin-left:290px;
position:absolute;
min-height:300px;
height: 100%;
overflow:auto;
padding-bottom:27px;
padding-top: 171px;
}
This will cause the blogroll to have its own scrollbars inside the page (so they could be used, and, in theory, the page won't. To be sure, set your body field to 0 for ie. Should work.
source to share