CSS fixed div. Avoid unwanted overlapping

Question

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!

Answer 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 */
}