Label 1

Look, Another Label

Frameset appearance, single HTML document.

I've been wanting to build multi-pane layouts that don't rely on <frameset>, but could still feature a fixed-height header.

That's what this page does. If you have Developer Toolbar for Firefox, hit Ctrl+Shift+S (to disable all styles). This is a single HTML document.

Play with the size of your window to see what this does.

Why?

Various reasons (spidering, deep linking, cross-window scripting) that frames are bad. You know the deal.

So, curiosity, mostly.

Browser Support?

Seems to work fine in FF2, IE6/7, Opera 9, and Safari 2.

...or could this label be used as a mini-toolbox?

How the heck does this work?

By utilizing position:absolute - lots of it. The dark grey header, green left pane, and purple right pane, as well as the yellow label elements, are all positioned absolutely, relative to a container #wrap.

The <html> and <html> elements are both given width:100%;, height:100%;, as well as overflow:hidden; - this prevents default browser scrollbars.

The header is easy - just positioned at the top left, with a fixed height.

The scrollable panes... not as easy. The goal is to have elements that are as tall as the entire <body>, minus the height of the header or other fixed-height elements.

You have to already have working knowledge of the position:relative; parent and position:absolute; child to grasp the following.

Create a container. Give it position:relative;.
Give this container a child. This child should have position:absolute; left:0px; top:70px; (70 should be replaced with whatever the header's height is).

That's about all that can be done, cross-browser.

Browser Shuffle

Like usual, there are two ways of accomplishing this, the IE Way, and the Everything Else Way.

Everything Else

To provide dimensions to an absolutely positioned box in good browsers, you have three options:

Do nothing. Box will size itself according to its contents.
Apply a width and height.
Apply *all* possible location values: top, right, bottom, left.

What's up with number 3? How can left and right co-exist?

Provided that there is no dimension specified for that direction (horizontally, e.g. width), the presence of two opposing location values will cause the box to be stretched, sort of like clay. The width of the box will be: parent box width minus left value minus right value, with outermost left edge located at left value, and outermost right edge located at right value.

The same is true for the relationship between top, bottom, and height, except vertically instead of horizontally.

For example's sake, the green box has these properties declared:

position:absolute;
left:0px;
top:0px;
bottom:0px;
width:40%;

...and the purple box has these properties:

position:absolute;
left:40%;
top:0px;
bottom:0px;
width:60%;

How to do the same in Exploder?

Up front: there is some syntax hacking here.

IE - including 7 - does not support the specification of both left and right at the same time (nor top and bottom). This means you have to use height:100%;.

But wait - declaring something to be 100% high while positioned some nonzero distance from the top would mean that it would be out of its parent's phsyical boundaries.

Here's where the IE box model comes in handy: specify a border-top:Whatever-The-Heigh-Of-The-Header-Happens-To-Bepx;, in conjunction with setting the top value back to 0 for IE. This will shrink the scrollable portion of the box, vertically.

If that border color happens to match the body color, which it does here, then it create the illusion of being as height as #wrap minus the header height.

Where'd the white gaps come from?

Note: The gaps are specified in pixels despite the percentage based #wrap width.

For the horizontal gap under the header, I specified the top value for the two colored boxes be a few pixels more than the header height.
For the vertical gap between the two colored boxes, I introduced extra markup (bad), which introduces redundant height:100%;, an extra left value for good browsers, and a border-left for IE.
The gap around the entire page is controlled by the padding spec on the <body> element.