I’m creating a webpage where I need a content column in the center of the page (including a fixed width) and two non-scrollable (fixed) columns at the left and the right side of that content column (including a fixed width also). The left column needs to be aligned to the left side of the middle content column. The right column needs to be aligned to the right side of the middle content column.
If the content column gets a lot of content the middle content column should be scrollable with a scrollbar at the right side of the browser. But the left and right columns must not scroll, but stay fixed against the top of the browser.
When resizing the browser width then the left+middle+right columns keeps their width and centered in the middle of the webpage. At the left side of the left column and at the right side of the right column the whitespace will increase/decrease on both sides with same width.
In my screen example you find the concept of what I’m trying to solve.
I tried to search for this problem at stackoverflow and google, but I only found examples wich are a bit different.
Who knows how to solve this problem?
example in JSBin
– (see updated version below, this is buggy, fixed columns are sticky)
to show the wrapper is actually
centering the whole lot
position the left and right wraps
first so the the
position:fixedcolumns don’t go to side of viewport
Update
non-buggy version now in JSBin
hmm that was more difficult than I thought it would be; this one works in IE7, 8, Safari, FF3.6, Opera, Chrome
view the source code for the notes, especially interesting is pointer-events, without them the newer browsers will not click through (select text or click a link) an “overlaid” div, which is what this layout is doing it’s overlaying an Absolutely Position div and using absolute positioning and relative position to get around the scrolling, vertical and horizontal, issues there was with disappearing content and sticky fixed divs
Updated to use jQuery as per comments
Example: here