Look Ma

Service Navigation

Main Content

… it's all flexible

Everyone needs a companion

— this layout has loads of them. It's a test layout for the companion columns technique.

Lots of background images are used for shadows and gradients, the ones that have to run from top to bottom are located in the companions in the pedestal — and run from bottom to top. For an in-depth explanation please read the article mentioned above.

This layout consists of three columns, each of which of different width. The image column (right) has a fixed width in pixels, the notes column (left) is 1/3 of the rest of the available width, the main column is 2/3. There are min-width and max-width in em assigned to the containing element.

Yes, this is experimental. No margins or paddings were harmed in the creation of this layout.

Works in:

Windows

  • FF 1.0.7/1.5/ 2.0.0.1/2.0.0.4/ 3.0a5pre
  • IE 7
  • IE 6/5.5/5
  • Opera 9
  • Safari 3.0.2 beta

Mac

  • FF 1.0.7/1.5
  • iCab 3.0.3
  • Safari 2.0.2
Fails in:

Windows

  • Opera 8.5 (hor. scrollbar on narrow and wide screen)

Mac

  • IE 5.2 (didn't even try to get it work yet)
  • Opera 8.5 (extreme hor. scrollbar on narrow screen)
  • Safari 1.0/1.0.3 (lost background-images, horizontal scrollbar, no column shift with pos. rel.)
Last updated:
27.06.07
Created:
June 22/23, 2007

Notes

  • IE Win 5/5.5/6

    Special treatment —

    For IE Win, this layout uses some critical techniques — namely: stacked, shifted and widened columns with large paddings and negative margins both horizontal and vertical. But with some hacking it seems to be stable.

    As always, some hasLayout-hacks are needed — and as %-widths tend to cause rounding errors, some negative backside-margins are used to prevent float-drops.

    No min-/max-width hack applied.

  • Safari 2.0.2

    Hidden background-images —

    All columns and companions need to be positioned to prevent Safari from hiding some (parts of) background-images.

  • Opera prev. 9, Safari 1.0 - ?

    On stacking —

    Opera prev. 9 and elder Safaris get the stacking context wrong when there's float applied to a relative positioned element.

    To get the columns in front of the companions, they need to be wrapped in an element which is positioned and z-indexed (and not floated, of course).

Images