BlueBodens Equal-height Columns Technique.

I present to you, my most complex layout to date, this is a position based layout. This layout is only supported by the most modern browsers such as: Internet Explore7+, Firefox, safari, opera.

As you may or may not know, the "One True Layout", or the "Holy Grail" of webdesign, is considered to have multiple-columns. Some webdesigners want these columns to be of equal height. This is easily done using tables, but when we want our layouts to be fully css based, without using JavaScript or browser specific hacks, it becomes quite hard to achieve the effect. The modern browsers however allows the use of CSS position and z-index togetter, which can be used to create the illusion without resorting to hacks.

I won't say that this is harder then using tables, but i do suggest that beginners follow some tutorials on css position and z-index, before trying to understand this layout.

Graphically appealing

The absolute minimum of demands i have to a layout, is 1: it should be graphically appealing, 2: it should have an easy to understand GUI, 3: it should be easy to navigate on. In other words, it should be somewhat graphically appealing to my visitors. And to some extend it should be possible to make immidetely sense of content, the user shouldn't need to read through walls of text or links, instead the page should be divided in sections, I.E. Left/right menu, and Center-Content.

Therefor i toke advantage of additional divs, to force the illusion of equal-height columns. Note that this layout dosn't use negative margins, or other crazy hacks like that. There was a time where it was required to use negative margins or similar hacks, today i present an alternative to these hacks.

Copyright

The CSS and HTML in this example, can freely be used in your own layouts, you don't even have to link back, or refer to me in any way.

However Graphics and images are copyrighted, and as such you should use your own.

This layout is an example layout, and part of the Tutorial Entry CSS Position Based Layouts.

Disclaimer

The Technique in this layout, needs additional testing. It is uncertain how future-safe the Technique is, the good news is that there are other "more simple" techniques on the way, in the css3 specifications.

On the other hand, i'm not sure it will get easier to make a given background or image, fill the intire canvas, even when scrolling. This is due to the way browsers calculate the canvas, which (if you ask me) is stupid.

At the moment the only way's (i know of) to have something fill out the canvas horizontally, is by applying the image as a background on the body element, or by using tables. Vertically we however have my method aswell, i sey "my" because i havn't seen anyone else use this, and because this is simply how i do it. My method is especially useful when creating multi-column layout, you can even use images as backgrounds. And you have the advantage of css-position, which is very search-engine friendly.

Browser support

I tested this on both IE7, Firefox2, and safari. All of which seam to render the page as intended. I also tested on Opera, but can't seam to get the min-height right.

In Firefox2 and safari, there was a gab at the bottom at around "1em", applying display:inline-block; to the CenterContent got rid of it, but made Operas rendering even worse. I'm still trying to get this layout to work in opera.

23. april 2008:
I guess this is Good News, i tested in Firefox3 beta5, and it didn't need the "display: inline-block;" fix, which was needed in Firefox2 and Safari. I'll keep you updated for future releses, stay turned!

Percentage Based Source

I created both a pixel based version, and a percentage based. In the percentage based layout, simply change the min/max width's of the Basement, until it fits your needs:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>BlueBodens Equal-height Columns layout.</title>
    <style type="text/css">
    html {
     height: 100%;
    }
    body {
     height: 100%;
     margin: 0;
     background: #000000;
     text-align: center;
    }
    #Basement {
     position: relative;
     height: 100%;
     min-width: 768px;
     max-width: 900px;
     margin: 0 auto;
    }
    #CenterContent {
     position: relative;
      top: 0;
     width: 70%;
     min-height: 100%;
     text-align: left;
     display: inline-block; /* Fixes a bottom gab in Firefox2 and Safari, Firefox3 beta5 didn't need this */
}
    #RightContent {
     position: absolute;
      top: 0;
      Right: -20%;
     width: 20%;
     min-height: 100%;
     text-align: left;
}
    #LeftContent {
     position: absolute;
      top: 0;
      left: -600%;
     width: 100%;
     min-height: 100%;
     background: red;
     text-align: left;
}
    #LeftRightContent {
     position: absolute;
      top:0;
      right: -600%;
     width: 100%;
     min-height: 100%;
     background: yellow;
     z-index: 1;
}
    #LeftCenterContent {
     position: absolute;
      top: 0;
      left: 100%;
     width: 500%;
     min-height: 100%;
     background: purple;
}
    .ContentWrap {
      position: relative;
      width: 95%;
      margin: 0 auto 1em;
      z-index: 2;
    }
    </style>
  </head>
  <body>
    <div id="PeakingSun"></div>
    <div id="Basement">
      <div id="CenterContent">
        <div class="ContentWrap">
          <!--Center Content-->
        </div>
        <div id="RightContent">
          <div class="ContentWrap">
            <!--Right Menu-->
          </div>
          <div id="LeftContent">
            <div id="LeftRightContent"></div>
            <div id="LeftCenterContent"></div>
            <div class="ContentWrap">
              <!--Left Menu-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>  
</html>

Brugbart Webdesign Logo

Brugbart Webdesign Logo