Full-height columns with tableless design

Put the stuff in the pre tags in your ploneCustom.css.

Solution 1

• Indented Header
• 100% of the first column available for background
• height of the content or portlets available for the background of the third (second) column
• footer at the bottom of everything

      #visual-portal-wrapper {
          margin-left: <dtml-var columnOneWidth missing="16em">;
          padding-right: <dtml-var columnTwoWidth missing="16em">;
      }

      * html #visual-column-wrapper {
          margin-left: -<dtml-var columnOneWidth missing="16em"> !important;
          position: relative;
          left: <dtml-var columnOneWidth missing="16em">;
      }

      #portal-column-one {
          position: relative;
          top: 0;
          left: -<dtml-var columnOneWidth missing="16em">;
      }

      * html #portal-column-one {
          left: 0;
      }

      #portal-column-two {
          position: relative;
          top: 0;
          right: -<dtml-var columnTwoWidth missing="16em">;
      }

      #portal-column-one .portlet,
      #portal-column-two .portlet {
          position: relative;
      }

      #content {
          position: relative;
          top: 0;
          left: 0;
          margin: 0 !important;
          z-index: 20;
      }

      * html #content {
          margin-left: <dtml-var columnOneWidth missing="16em"> !important;
          margin-right: <dtml-var columnTwoWidth missing="16em"> !important;
      }

      #portal-top {
          position: relative;
      }

Solution 2

• Intended Header
• 100% of both columns except in moz (js solution soon)
• footer at the bottom of everything
• possibly enables dissappearing float bug (feedback please)

      #content,
      #content p,
      div.comment,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .documentDescription,
      .portalMessage {
          height: auto !important;
      }

      .hiddenStructure {
          height: 1px !important;
      }

      html,
      body {
          min-height: 100%;
          height: auto;
      }

      * html,
      * html body {
          height: 100%;
      }

      #visual-portal-wrapper {
          margin-left: <dtml-var columnOneWidth missing="16em">;
          padding-right: <dtml-var columnTwoWidth missing="16em">;
          min-height: 100%;
          height: auto;
      }

      * html #visual-portal-wrapper {
          height: 100%;
      }

      #portal-top,
      #portal-top #portal-logo,
      #portal-top #portal-globalnav,
      #portal-top #portal-breadcrumbs {
          position: relative;
      }

      #portal-column-one {
          position: relative;
          top: 0;
          left: -<dtml-var columnOneWidth missing="16em">;
      }

      #portal-column-two {
          position: relative;
          top: 0;
          right: -<dtml-var columnTwoWidth missing="16em">;
      }

      #portal-column-one .portlet,
      #portal-column-two .portlet {
          position: relative;
      }

      #content {
          position: relative;
          top: 0;
          left: 0;
          margin: 0 !important;
          z-index: 20;
      }

How To Use

in both solutions you have to place the background of the portlets for the left side on the body and for the right side put it on the visual-portal-wrapper

details soon

Usecases

• Highly graphical sites

Compatible

this layout is compatible with

• Opera 7.20+
• Internet Explorer 5.5+
• Mozilla 1.3+ (Solution 1, Solution 2 works actually like 1 but 2 is better for ie and opera)

Known Bugs

• possibly enables disappearing float bug in ie 6 (solution 2)
• min-height doesn't work in moz (solution 2)

please report bugs/incompatibilities to the Author.

Credits

Written by Michael Zeltner. Many thanks to Sjors Robroek for inspiring.