I am a bit frustrated.

I actually do like web page layouts that prevent scrolling of some content. Why? Because i have a 1680 resolution here and I really appreciate that some navigation stays in place. Even for small resolutions the loss of a few pixels is a gain of usability.

So far I have only seen and used two different techniques that do not use frames of any kind.

  1. Div-Puzzle
    In a Div-Puzzle you use some amount of divs to fill the screen. All these divs stay in place, most likely using an absolute css positioning. There is quite likely a “content” div that will be the only one that has a visible overflow.
    While this div puzzle works nice for many designs I tried so far it exposes some issues:

    1. Browser Quirks
      There are quite a lot of hacks required to get this working correctly and place all the puzzle pieces where they should belong in all browsers.
    2. 100% Issue
      It is even more complicated to get 100% width and/or height on all those elements where you want. Its possible, but depending on the nesting not very nice.
    3. Scroll Detection
      While many PC browsers manage to find out that there is only one div that can be scrolled, mobile browsers hardly can deal with that. Also scrolling wheel sometimes only works when the mouse is over the main scrolling div. Also the scrollbar will mess up the design. If its not only being it ugly looking, its also of different width when its not there. iPhone uses need to double scroll to be able to scroll inside.
  2. Fixed-Framing
    In this technique, you put all your main stuff to the body element. This is good for browsers, because that is what they want to have. In addition you build some divs that contain navigation or just background images. These divs get a fixed position and a higher z-index than the body. In addition the body gets some padding so it makes sure that no content will be under the frame. This solution seems to have less downsides for me:

    1. Format
      As the padding is required for this solution to work only rectangular window from the frame is easily possible.
    2. Browser Display
      At least my S60 browser displays the frame initially fine. But on scrolling it has redraw issues, hiding the content which is scrolled over (but which is actually fixed on a higher z-layer)

Are there any other good ideas for realizing a nice layout like the ones I implemented on www.tempus-vivit.net or www.hma-info.de ?

Especially I am interested in “legal footer” solutions. I can live with the footer beeing relatively positioned to the end of the page, lets say with some 30 pixels spacing. However on larger resolutions, where the main content of the page filles only 50% of it, I still want the footer to be at the bottom of the page, as I think having the footer in the center of the screen distracts and looks ugly :-)