Layout - Container layers

The absolute positioning techniques, are wonderful, but do not deal adequately with the reality on the web that folks have complete freedom to re-size the browser window to whatever they like. There are two dominant approaches to this design problem...

Fitting all of our content into a fixed width box on the screen--usually centered, or
Creating a 'liquid'- or flexible-width box.

For both of these approaches, we'll enclose all of our markup in a container layer that looks like this ...

[all our page content...]

</div>
</body>
</html>

On the Web

Molly Holzschlag considers the layout possibilities beyond the grid made possible by CSS-based layout.
She highlights this site at Kutztown U
CSS Zen Garden

Here we'll go through the process of constructing the container step by step.

Fixed width container

#content {
  width: 600px;
}

That's it! We don't want a height if we're going to fill this container with text and other things.

Fixed width container for absolute layers

#content {
  width: 600px;
  height: 300px;
  position:relative;
}

This kind of a container lets us position a bunch of items using absolute-positioning, and then move them somewhere else on the screen as a group.

In DreamWeaver, this kind of container allows us to drag around our layers with the mouse, and position those layers relative to our container (not the browser window).

The height is only needed if we want to position layers relative to the bottom of our container box on the screen.

The full story on the position property is...

position: static - Content displays in the normal flow of things.
position: relative - Content displays with an offset relative to where it would have shown up in the normal flow of things. But this is also used to enclose absolute layers...
position: absolute - Content displays with an offset, ummmm, relative to the containing object, whether that be the <body> (browser window), or a relatively-positioned <div>.
position: fixed - Content displays with a relative offset from the browser window, and then stays there, even as the rest of the page is scrolled somewhere else. E.g. Paul's vita.

Centered container

#content {
  width: 600px;
  margin: auto;
}

With FireFox, this is enough to produce a centered container with a fixed width. See for example bluerobot.com. But, this doesn't center in IE. We can cause the container layer to be centered with this additional body rule...

body { text-align: center; }

#content {
  width: 600px;
  margin: auto;
}

But--oh no!--Now text inside the container is centered as well. So, our final iteration which results in

a centered container,
with left-aligned text inside,
lets you position layers absolutely inside,
and works in IE / Firefox / Safari / Opera is...

body { text-align: center; }
#content {
  width: 600px;
  margin: auto;

  position: relative;
  text-align: left;
}

Flexible or 'liquid' layout

#content {
  width: 80%;
  margin: auto;
}

This is the simplest way to make a container with a variable width. The container will always be 80% of the width of the browser window, whether that window is set to be 100 pixels wide or 1400 pixels wide.

Flexible, within limits

Since the <table> tag, it's been possible to make flexible layouts with a minimum width, but no maximum width.

IE7.0 (but not IE 6) finally supports the CSS2 max-width property--but only in 'strict' mode, e.g. using this doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

So for the first time, the dominant browser allows us to create flexible layouts that have both a min and max width.

Unfortunately IE 6 (still the IE flavor installed on more desktops than any other browser) does not understand max-width, and if we set it, IE 6 will act as if no width has been specified, and the division will take up the whole width of the screen!

The solution is to use min- and max-width that Opera/Firefox/IE7.0 will understand, and use a hack to apply a rule only to IE6. that will cause IE to display a fixed-width layer.This will probably be worth doing through at least the end of 2008.

#content {
  min-width: 20em;
  max-width: 30em;
  _width: 25em; /* only affects IE 6 and below */
}

Another promising approach is the use Dean Edwards' IE7 javascript library which promises (and mostly delivers) to make IE5.5-6.x act as if they're obeying current CSS standards. I'm finding (2008) that it supports, e.g. min- and max-width when specified in pixels, but not in em units.