.layer

Overlays a layer that fills the dimensions of its container, including the container's padding. Takes the additional classes:

.screen
For overlays and event catchers. Hidden by default.
.centering
Centers content vertically and horizontally.
.hide-scroll
.push-scroll
.show-scroll

div.screen.layer

I am a .screen.layer. By default, I have display: none; so you wouldn't normally see me. Here, I've been redefined with display: block; .

div.layer
  {content}

Hello. I am some content in a layer.
Hello. I am a box that overflows it's container by quite a wide margin due to the sheer quantity of text in this sentence and a little help from a large width styling.

div.centering.layer
  div
    {content}

Hello. I am a central box.

A limitation of this construct is that contents will overflow the layer whatever you set overflow to, because display: table; disregards the overflow style.

Hello. I am a really wide, yet central, box.

To get round this problem we need to wrap the .centering.layer in another layer:

div.layer
  div.centering.layer
    div
      {content}

Hello. I am a really wide, yet central, box.

The question is: how the hell do we hide the srollbars and still allow scrolling?

div.hide-scroll.layer
  div.push-scroll.layer
    div.show-scroll.layer
      div.centering.layer
        div
          {content}

It turns out to be harder than we thought. It involves a lot of nested layers. The trick is to make some layers ignore their container's padding and others to respect it. We can do this with:

top: 0; right: 0; bottom: 0; left: 0;

to ignore padding, and

width: 100%; height: 100%;

to respect padding. Note that defining width/height will override top/right/bottom/left declarations, and display: table; will collapse anything that does not have width/height defined, making the whole thing a bit of a mindbender. See comments in html for details of what each nested div does.

Hello. I am a really tall, yet central, box.

I'm contained inside a construct that permits scrolling - but without showing the scrollbars.

It takes a few extra divs to achieve this.

It also requires that you know the width of the browser's scrollbars. There's an accompanying jQuery extension that gives us this in jQuery.support.scrollbarWidth.

The result is worth it.

Hello. I am a wide, yet central, box.

I'm contained inside a construct that permits scrolling - but without showing the scrollbars.

It takes a few extra divs to achieve this.

It also requires that you know the width of the browser's scrollbars. There's an accompanying jQuery extension that gives us this in jQuery.support.scrollbarWidth.

The result is worth it.

Hello. I am normal box, inside a scrolling construct, but I should not cause scrolling to take place.

I have a width: 100%; height: 100%; I don't seem to work in FF.