开发者

Howto create css columns that incl. a scrollable middle column and floating left and right columns

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开发者_StackOverflow社区 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.

Howto create css columns that incl. a scrollable middle column and floating left and right columns

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)

  • the green is not required it's there to show the wrapper is actually centering the whole lot
  • absolutely position the left and right wraps first so the the position:fixed columns 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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜