Question

I have a question for the front-end web development experts out there which is stumping me.

On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can’t be seen because it’s behind the fixed sidebar.

Here is a super stripped down example of my issue in jsFiddle.

EDIT: Here is a more complete example of my issue.

I thought that simply applying padding-right: “width of sidebar”px to either the body or to a wrapper div, or applying margin-right: “width of sidebar”px to the content div should fix the issue, but neither works. I don’t want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.

I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.

Thanks to anyone who can solve this stumper!

EDIT: After seeing a multiple questions about why I can’t simply set things up differently, I thought I’d clarify by showing a more in-depth example of what I’m trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!

Answer 1

I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint… See http://jsfiddle.net/aHKU5/98/

#wrapper {
    position: absolute;
    left: 0px; right:110px;
    border: 1px solid red;
}

Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well… http://jsfiddle.net/aHKU5/102/

#wrapper {
    position: absolute;
    left: 0px;
    max-width: 900px;
    margin-right: 110px;
    border: 1px solid red;
}