Power By 专否社区

CSS fixed div. Avoid unwanted overlapping

Go To StackoverFlow.com

3

I've got a CSS layout made of 2 columns. the navigation column to the left is a fix div. It stays there while scrolling down the main content in the column to the right.

The problem comes when I reduce the browser window, or zoom in: when scrolling the browser windom horizontally, the main content on the right starts overlapping the navigation column on the left.

How can I fix it so that whatever the size of my browser window or my zoom level is, when i scroll horizontally the fixed div isn't overlapped but pushes the main column to the right?

You can see it for real at: http://justarandomone.tumblr.com/

All the code is in the source (It is pretty messy, sorry for that).

Hope some one can help. Thanks!

2012-04-04 20:11
by Justa Randomone
I can't seem to duplicate the problem. It looks fine for me. What browser/version and operating system are you viewing this problem on? Perhaps you could post a screenshot of the problem or the code involved - cereallarceny 2012-04-04 20:14

1

not really an issue in my opinion.. anyway I think you could fix it putting the main block of content in a div and giving it absolute positioning. remove the float:left from the sidebar, it's not necessary.

#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 */
}
2012-04-04 20:32
by Valentino

1

you can give the #sidebar a solid background color (e.g. white); put it on top of the stack with z-index (any number greater than the z-index of the right side, e.g. 1); in addition, you may want to stretch the #sidebar with height: 100%. Finally, you probably want the #sidebar to appear covering the full height of the left side, you can add "top: 0" to achieve that.

2013-01-06 06:57
by ssssszzzzz

0

I'm able to recreate when shrinking Chrome to abnormally small window sizes and also on an iPhone. Setting the sidebar div to position:fixed forces it to stay in the position; causing issues with horizontal scrolling.

I switched sidebar position:absolute and then synced up the top-margin for both sidebar and blogroll and it seems to be working fine.

2012-04-04 20:46
by Shawn H.

0

Possible suggestion. use css to set both 'blogroll' and 'sidebar' height to the same value (i used 100% in this example). Thes add 'overflow: auto;' to '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 one would use them, and, theoretically, the page won't have any. To make sure, set your body margin's to 0 for ie. Should work.

2012-04-04 21:12
by Wolf-Kun
Ads